Use kebab-case for vue names

https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
This commit is contained in:
2019-04-04 11:33:43 +02:00
parent ccc78af742
commit ee5a1a8bb7
7 changed files with 31 additions and 31 deletions

View File

@@ -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);
}
}
}

View File

@@ -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() {

View File

@@ -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) {

View File

@@ -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,

View File

@@ -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>
`;

View File

@@ -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,

View File

@@ -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) {