html5 ondoubleclick,vue-table/semantic.html at master · ratiw/vue-table · GitHub

vuetable - Semantic

.ui.vertical.stripe h3 {

font-size: 2em;

}

.secondary.pointing.menu .toc.item {

display: none;

}

.vuetable {

margin-top: 1em !important;

}

.vuetable-wrapper.ui.basic.segment {

padding: 0em;

}

.vuetable button.ui.button {

padding: .5em .5em;

font-weight: 400;

}

.vuetable button.ui.button i.icon {

margin: 0;

}

.vuetable th.sortable:hover {

color: #2185d0;

cursor: pointer;

}

.vuetable-actions, .custom-action {

width: 15%;

padding: 12px 0px;

text-align: center;

}

.vuetable-pagination {

background: #f9fafb !important;

}

.vuetable-pagination-info {

margin-top: auto;

margin-bottom: auto;

}

[v-cloak] {

display: none;

}

.highlight {

background-color: yellow;

}

.vuetable-detail-row {

height: 200px;

}

.detail-row {

margin-left: 40px;

}

.expand-transition {

transition: all .5s ease;

}

.expand-enter, .expand-leave {

height: 0;

opacity: 0;

}

tr.odd {

background-color: #e6f5ff;

}

body {

overflow-y: scroll;

}

Home

Work

Company

Careers

Log in

Sign Up

List of Users

Search:

Go

Reset

Settings

Settings

Multisort (use Alt+Click)

Pagination:

vuetable-pagination

vuetable-pagination-dropdown

Per Page:

10

15

20

25

Visible fields

{{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize}}

Close

api-url="http://vuetable.ratiw.net/api/users"

pagination-path=""

:pagination-component="paginationComponent"

wrapper-class="vuetable-wrapper ui basic segment"

table-wrapper=".vuetable-wrapper"

:fields="fields"

:sort-order="sortOrder"

:multi-sort="multiSort"

:item-actions="itemActions"

:per-page="perPage"

:append-params="moreParams"

detail-row-component="my-detail-row"

detail-row-id="id"

detail-row-transition="expand"

row-class-callback="rowClassCB"

>

$('#settingsModal').modal({

detachable: false,

onVisible: function() {

$('.ui.checkbox').checkbox()

}

}).modal('attach events', '#settingsBtn', 'show')

var tableColumns = [

// '__checkbox:id',

{

name: 'id',

title: '',

dataClass: 'center aligned',

callback: 'showDetailRow'

},

{

name: 'name',

title: 'Full Name',

sortField: 'name'

},

{

name: 'email',

sortField: 'email',

visible: true

},

{

name: 'nickname',

sortField: 'nickname',

callback: 'allCap'

},

{

name: 'birthdate',

sortField: 'birthdate',

callback: 'formatDate|D/MM/Y'

},

{

name: 'gender',

sortField: 'gender',

titleClass: 'center aligned',

dataClass: 'center aligned',

callback: 'gender'

},

{

name: '__component:custom-action',

title: "Component",

titleClass: 'center aligned',

dataClass: 'custom-action center aligned',

},

{

name: '__actions',

dataClass: 'center aligned',

}

]

Vue.config.debug = true

var E_SERVER_ERROR = 'Error communicating with the server'

Vue.component('custom-action', {

template: [

'

',

'',

'',

'',

'

'

].join(''),

props: {

rowData: {

type: Object,

required: true

}

},

methods: {

itemAction: function(action, data) {

sweetAlert('custom-action: ' + action, data.name)

},

onClick: function(event) {

console.log('custom-action: on-click', event.target)

},

onDoubleClick: function(event) {

console.log('custom-action: on-dblclick', event.target)

}

}

})

Vue.component('my-detail-row', {

template: [

'

',

'

',

'Name: ',

'{{rowData.name}}',

'

',

'

',

'Email: ',

'{{rowData.email}}',

'

',

'

',

'Nickname: ',

'{{rowData.nickname}}',

'

',

'

',

'Birthdate: ',

'{{rowData.birthdate}}',

'

',

'

',

'Gender: ',

'{{rowData.gender}}',

'

',

'

',

].join(''),

props: {

rowData: {

type: Object,

required: true

}

},

methods: {

onClick: function(event) {

console.log('my-detail-row: on-click')

}

},

})

new Vue({

el: '#app',

data: {

searchFor: '',

moreParams: [],

fields: tableColumns,

sortOrder: [{

field: 'name',

direction: 'asc',

}],

multiSort: true,

paginationComponent: 'vuetable-pagination',

perPage: 10,

// paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',

itemActions: [

{ name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },

{ name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},

{ name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }

]

},

watch: {

'perPage': function(val, oldVal) {

this.$broadcast('vuetable:refresh')

},

'paginationComponent': function(val, oldVal) {

this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)

}

},

methods: {

/**

* Callback functions

*/

allCap: function(value) {

return value.toUpperCase()

},

gender: function(value) {

return value == 'M'

? 'Male'

: 'Female'

},

formatDate: function(value, fmt) {

if (value == null) return ''

fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt

return moment(value, 'YYYY-MM-DD').format(fmt)

},

showDetailRow: function(value) {

var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'down' : 'right'

return [

'',

'',

''

].join('')

},

setFilter: function() {

this.moreParams = [

'filter=' + this.searchFor

]

this.$nextTick(function() {

this.$broadcast('vuetable:refresh')

})

},

resetFilter: function() {

this.searchFor = ''

this.setFilter()

},

changePaginationComponent: function() {

this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)

},

preg_quote: function( str ) {

// http://kevin.vanzonneveld.net

// + original by: booeyOH

// + improved by: Ates Goral (http://magnetiq.com)

// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

// + bugfixed by: Onno Marsman

// * example 1: preg_quote("$40");

// * returns 1: '\$40'

// * example 2: preg_quote("*RRRING* Hello?");

// * returns 2: '\*RRRING\* Hello\?'

// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");

// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\\|\:'

return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\\|\:])/g, "\\$1");

},

highlight: function(needle, haystack) {

return haystack.replace(

new RegExp('(' + this.preg_quote(needle) + ')', 'ig'),

'$1'

)

},

rowClassCB: function(data, index) {

return (index % 2) === 0 ? 'odd' : 'even'

},

// -------------------------------------------------------------------------------------------

// You can change how sort params string is constructed by overriding getSortParam() like this

// -------------------------------------------------------------------------------------------

// getSortParam: function(sortOrder) {

// console.log('parent getSortParam:', JSON.stringify(sortOrder))

// return sortOrder.map(function(sort) {

// return (sort.direction === 'desc' ? '+' : '') + sort.field

// }).join(',')

// }

},

events: {

'vuetable:row-changed': function(data) {

console.log('row-changed:', data.name)

},

'vuetable:row-clicked': function(data, event) {

console.log('row-clicked:', data.name)

},

'vuetable:cell-clicked': function(data, field, event) {

console.log('cell-clicked:', field.name)

if (field.name !== '__actions') {

this.$broadcast('vuetable:toggle-detail', data.id)

}

},

'vuetable:action': function(action, data) {

console.log('vuetable:action', action, data)

if (action == 'view-item') {

sweetAlert(action, data.name)

} else if (action == 'edit-item') {

sweetAlert(action, data.name)

} else if (action == 'delete-item') {

sweetAlert(action, data.name)

}

},

'vuetable:load-success': function(response) {

var data = response.data.data

if (this.searchFor !== '') {

for (n in data) {

data[n].name = this.highlight(this.searchFor, data[n].name)

data[n].email = this.highlight(this.searchFor, data[n].email)

}

}

},

'vuetable:load-error': function(response) {

if (response.status == 400) {

sweetAlert('Something\'s Wrong!', response.data.message, 'error')

} else {

sweetAlert('Oops', E_SERVER_ERROR, 'error')

}

}

}

})