Use kebab-case for vue names
https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
This commit is contained in:
@@ -28,8 +28,8 @@ const TEMPLATE =`
|
||||
:rowObjects="sortedRowObjects"
|
||||
:config="rowFilterConfig"
|
||||
:componentState="(componentState || {}).rowFilter"
|
||||
@visibleRowObjectsChanged="onVisibleRowObjectsChanged"
|
||||
@componentStateChanged="onRowFilterStateChanged"
|
||||
@visible-row-objects-changed="onVisibleRowObjectsChanged"
|
||||
@component-state-changed="onRowFilterStateChanged"
|
||||
/>
|
||||
<pillar-table-actions
|
||||
@item-clicked="onItemClicked"
|
||||
@@ -37,8 +37,8 @@ const TEMPLATE =`
|
||||
<pillar-table-column-filter
|
||||
:columns="columns"
|
||||
:componentState="(componentState || {}).columnFilter"
|
||||
@visibleColumnsChanged="onVisibleColumnsChanged"
|
||||
@componentStateChanged="onColumnFilterStateChanged"
|
||||
@visible-columns-changed="onVisibleColumnsChanged"
|
||||
@component-state-changed="onColumnFilterStateChanged"
|
||||
/>
|
||||
</div>
|
||||
<div class="pillar-table">
|
||||
@@ -70,9 +70,9 @@ const TEMPLATE =`
|
||||
* Extend ColumnFactoryBase to create the rows for your table
|
||||
* Extend This Table with your ColumnFactory and RowSource
|
||||
*
|
||||
* @emits isInitialized When all rows has been fetched, and are initialized.
|
||||
* @emits selectItemsChanged(selectedItems) When selected rows has changed.
|
||||
* @emits componentStateChanged(newState) When table state changed. Filtered rows, visible columns...
|
||||
* @emits is-initialized When all rows has been fetched, and are initialized.
|
||||
* @emits selected-items-changed(selectedItems) When selected rows has changed.
|
||||
* @emits component-state-changed(newState) When table state changed. Filtered rows, visible columns...
|
||||
*/
|
||||
let PillarTable = Vue.component('pillar-table-base', {
|
||||
template: TEMPLATE,
|
||||
@@ -155,12 +155,12 @@ let PillarTable = Vue.component('pillar-table-base', {
|
||||
// Deep compare to avoid spamming un needed events
|
||||
let hasChanged = JSON.stringify(newValue ) !== JSON.stringify(oldValue);
|
||||
if (hasChanged) {
|
||||
this.$emit('selectItemsChanged', newValue);
|
||||
this.$emit('selected-items-changed', newValue);
|
||||
}
|
||||
},
|
||||
isInitialized(newValue) {
|
||||
if (newValue) {
|
||||
this.$emit('isInitialized');
|
||||
this.$emit('is-initialized');
|
||||
}
|
||||
},
|
||||
currentComponentState(newValue, oldValue) {
|
||||
@@ -168,7 +168,7 @@ let PillarTable = Vue.component('pillar-table-base', {
|
||||
// Deep compare to avoid spamming un needed events
|
||||
let hasChanged = JSON.stringify(newValue ) !== JSON.stringify(oldValue);
|
||||
if (hasChanged) {
|
||||
this.$emit('componentStateChanged', newValue);
|
||||
this.$emit('component-state-changed', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -56,8 +56,8 @@ class ComponentState {
|
||||
/**
|
||||
* Component to select what columns to render in the table.
|
||||
*
|
||||
* @emits visibleColumnsChanged(columns) When visible columns has changed
|
||||
* @emits componentStateChanged(newState) When column filter state changed.
|
||||
* @emits visible-columns-changed(columns) When visible columns has changed
|
||||
* @emits component-state-changed(newState) When column filter state changed.
|
||||
*/
|
||||
let Filter = Vue.component('pillar-table-column-filter', {
|
||||
template: TEMPLATE,
|
||||
@@ -85,14 +85,14 @@ let Filter = Vue.component('pillar-table-column-filter', {
|
||||
this.columnStates = this.createInitialColumnStates();
|
||||
},
|
||||
visibleColumns(visibleColumns) {
|
||||
this.$emit('visibleColumnsChanged', visibleColumns);
|
||||
this.$emit('visible-columns-changed', visibleColumns);
|
||||
},
|
||||
columnFilterState(newValue) {
|
||||
this.$emit('componentStateChanged', newValue);
|
||||
this.$emit('component-state-changed', newValue);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('visibleColumnsChanged', this.visibleColumns);
|
||||
this.$emit('visible-columns-changed', this.visibleColumns);
|
||||
},
|
||||
methods: {
|
||||
createInitialColumnStates() {
|
||||
|
@@ -56,7 +56,7 @@ class ComponentState {
|
||||
* Filter row objects based on enumeratable values.
|
||||
*
|
||||
* @emits visibleRowObjectsChanged(rowObjects) When the objects to be visible has changed.
|
||||
* @emits componentStateChanged(newState) When row filter state changed.
|
||||
* @emits component-state-changed(newState) When row filter state changed.
|
||||
*/
|
||||
let EnumFilter = {
|
||||
template: TEMPLATE,
|
||||
@@ -107,14 +107,14 @@ let EnumFilter = {
|
||||
},
|
||||
watch: {
|
||||
visibleRowObjects(visibleRowObjects) {
|
||||
this.$emit('visibleRowObjectsChanged', visibleRowObjects);
|
||||
this.$emit('visible-row-objects-changed', visibleRowObjects);
|
||||
},
|
||||
currentComponentState(newValue) {
|
||||
this.$emit('componentStateChanged', newValue);
|
||||
this.$emit('component-state-changed', newValue);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('visibleRowObjectsChanged', this.visibleRowObjects);
|
||||
this.$emit('visible-row-objects-changed', this.visibleRowObjects);
|
||||
},
|
||||
methods: {
|
||||
shouldBeVisible(rowObject) {
|
||||
|
@@ -6,15 +6,15 @@ const TEMPLATE =`
|
||||
:componentState="componentState"
|
||||
:rowObjects="rowObjects"
|
||||
:valueExtractorCB="extractName"
|
||||
@visibleRowObjectsChanged="$emit('visibleRowObjectsChanged', ...arguments)"
|
||||
@componentStateChanged="$emit('componentStateChanged', ...arguments)"
|
||||
@visible-row-objects-changed="$emit('visible-row-objects-changed', ...arguments)"
|
||||
@component-state-changed="$emit('component-state-changed', ...arguments)"
|
||||
/>
|
||||
`;
|
||||
/**
|
||||
* Filter row objects based on there name.
|
||||
*
|
||||
* @emits visibleRowObjectsChanged(rowObjects) When the objects to be visible has changed.
|
||||
* @emits componentStateChanged(newState) When row filter state changed.
|
||||
* @emits component-state-changed(newState) When row filter state changed.
|
||||
*/
|
||||
let NameFilter = {
|
||||
template: TEMPLATE,
|
||||
|
@@ -5,8 +5,8 @@ const TEMPLATE =`
|
||||
<name-filter
|
||||
:rowObjects="rowObjects"
|
||||
:componentState="componentState"
|
||||
@visibleRowObjectsChanged="$emit('visibleRowObjectsChanged', ...arguments)"
|
||||
@componentStateChanged="$emit('componentStateChanged', ...arguments)"
|
||||
@visible-row-objects-changed="$emit('visible-row-objects-changed', ...arguments)"
|
||||
@component-state-changed="$emit('component-state-changed', ...arguments)"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
@@ -7,15 +7,15 @@ const TEMPLATE =`
|
||||
:componentState="componentState"
|
||||
:rowObjects="rowObjects"
|
||||
:valueExtractorCB="extractStatus"
|
||||
@visibleRowObjectsChanged="$emit('visibleRowObjectsChanged', ...arguments)"
|
||||
@componentStateChanged="$emit('componentStateChanged', ...arguments)"
|
||||
@visible-row-objects-changed="$emit('visible-row-objects-changed', ...arguments)"
|
||||
@component-state-changed="$emit('component-state-changed', ...arguments)"
|
||||
/>
|
||||
`;
|
||||
/**
|
||||
* Filter row objects based on there status.
|
||||
*
|
||||
* @emits visibleRowObjectsChanged(rowObjects) When the objects to be visible has changed.
|
||||
* @emits componentStateChanged(newState) When row filter state changed.
|
||||
* @emits component-state-changed(newState) When row filter state changed.
|
||||
*/
|
||||
let StatusFilter = {
|
||||
template: TEMPLATE,
|
||||
|
@@ -21,7 +21,7 @@ class ComponentState {
|
||||
* Component to filter rowobjects by a text value
|
||||
*
|
||||
* @emits visibleRowObjectsChanged(rowObjects) When the objects to be visible has changed.
|
||||
* @emits componentStateChanged(newState) When row filter state changed. Filter query...
|
||||
* @emits component-state-changed(newState) When row filter state changed. Filter query...
|
||||
*/
|
||||
let TextFilter = {
|
||||
template: TEMPLATE,
|
||||
@@ -67,14 +67,14 @@ let TextFilter = {
|
||||
},
|
||||
watch: {
|
||||
visibleRowObjects(visibleRowObjects) {
|
||||
this.$emit('visibleRowObjectsChanged', visibleRowObjects);
|
||||
this.$emit('visible-row-objects-changed', visibleRowObjects);
|
||||
},
|
||||
currentComponentState(newValue) {
|
||||
this.$emit('componentStateChanged', newValue);
|
||||
this.$emit('component-state-changed', newValue);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('visibleRowObjectsChanged', this.visibleRowObjects);
|
||||
this.$emit('visible-row-objects-changed', this.visibleRowObjects);
|
||||
},
|
||||
methods: {
|
||||
filterByText(rowObject) {
|
||||
|
Reference in New Issue
Block a user