Skip to content

Commit

Permalink
Merge pull request #27 from silasrm/master
Browse files Browse the repository at this point in the history 
Add brazilian portuguese translation and more.
  • Loading branch information
@waningflow
waningflow authored Nov 28, 2021
2 parents 184caf6 + e98ac14 commit b2789b6
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 27 deletions.
1 change: 1 addition & 0 deletions dist/vue-virtual-table.esm.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/vue-virtual-table.esm.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vue-virtual-table.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vue-virtual-table.umd.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-virtual-table",
"version": "0.2.19",
"version": "0.2.21",
"description": "vue table component with virtual dom",
"author": "https://github.com/waningflow",
"license": "MIT",
Expand Down
20 changes: 19 additions & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ Here is a complex example and you can get more info in the tables below the exam
| hoverHighlight | Boolean | Whether to hightlight current row. | No | true |
| selectable | Boolean | Whether row is selectable. | No | false |
| enableExport | Boolean | Whether to show export-to-table button | No | false |
| language | String | Language from ['en', 'cn'] | No | 'cn' |
| language | String | Language from ['en', 'cn', 'ptBR'] | No | 'cn' |

### Table Events

Expand All @@ -158,6 +158,7 @@ Here is a complex example and you can get more info in the tables below the exam
| param | type | description | required | default |
| ------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------- |
| prop | String | Property name | Yes | |
| key | String | Key of element with data need in filter | No | same to the property name |
| name | String | Display name | No | same to the property name |
| width | Number | Column width | No | auto |
| sortable | Boolean | Whether this column is sortable | No | false |
Expand All @@ -180,3 +181,20 @@ Here is a complex example and you can get more info in the tables below the exam
| \_index | Show the index of row |
| \_action | A slot to customize the content |
| \_expand | A slot to customize a popover window |


### Custom slot with formatted data and filter

```javascript
{prop: '_action', key: 'price', name: 'Price', sortable: true, numberFilter: true, prefix: "R$ ", actionName: 'price-info'}
```

```javascript
{id: v.id, name: obj.name, price: obj.price, price_formatted: currency(obj.price)}
```

```html
<template slot-scope="scope" slot="price-info">
<div>{{ scope.row.price_formatted }}</div>
</template>
```
67 changes: 45 additions & 22 deletions src/vue-virtual-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@
item.filterSelectedOptions &&
item.filterSelectedOptions.length
}"
>{{ item.prop }}</span
>{{ item.key || item.prop }}</span
>
<base-icon
icon-name="arrowCarrotDown"
Expand Down Expand Up @@ -277,7 +277,7 @@
item.filterSelectedOptions &&
item.filterSelectedOptions.length
}"
>{{ item.prop }}</span
>{{ item.key || item.prop }}</span
>
</div>
<div
Expand All @@ -293,19 +293,19 @@
>
<i
class="sort-ascending"
@click="handleClickSort(item.prop, 'asc')"
@click="handleClickSort(item.key || item.prop, 'asc')"
:class="{
selected:
sortParam.col === item.prop &&
sortParam.col === (item.key || item.prop) &&
sortParam.direction === 'asc'
}"
></i>
<i
class="sort-descending"
@click="handleClickSort(item.prop, 'desc')"
@click="handleClickSort(item.key || item.prop, 'desc')"
:class="{
selected:
sortParam.col === item.prop &&
sortParam.col === (item.key || item.prop) &&
sortParam.direction === 'desc'
}"
></i>
Expand Down Expand Up @@ -375,6 +375,7 @@
:index="props.itemIndex"
:row="clearObj(props.item)"
:name="item.actionName || 'action'"
:key="item.key || item.prop"
/>
</div>
</template>
Expand All @@ -388,6 +389,7 @@
<slot
:index="props.itemIndex"
:row="clearObj(props.item)"
:key="item.key || item.prop"
name="expand"
/>
</div>
Expand Down Expand Up @@ -775,6 +777,31 @@ export default {
clear_btn: "Clear"
}
},
ptBR: {
selectAll: "Todos",
phraseFilter: {
in: "Incluir",
out: "Excluir",
ph: 'Pressione "Enter" para Confirmar',
and_btn: "E",
clear_btn: "Limpar"
},
selectFilter: {
confirm_btn: "Confirmar",
reverse_btn: "Inverter",
clear_btn: "Limpar"
},
numberFilter: {
eq: "=",
neq: "≠",
lt: "＜",
le: "≤",
gt: "＞",
ge: "≥",
bt: "between",
clear_btn: "Limpar"
}
},
cn: {
selectAll: "全选",
phraseFilter: {
Expand Down Expand Up @@ -1094,7 +1121,7 @@ export default {
let self = this;
let temp = deepCopy(self.dataInitTemp);
self.configTemp.forEach((v, i) => {
let prop = v.prop;
let prop = v.key || v.prop;
if (v.filterSelectedOptions && v.filterSelectedOptions.length) {
temp = temp.filter(
item => v.filterSelectedOptions.indexOf(self.getDescendantProp(item, prop)) > -1
Expand Down Expand Up @@ -1134,45 +1161,41 @@ export default {
switch (v.numberFilterPhrase.operator) {
case "eq":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) == Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) == Number(v.numberFilterPhrase.value[0])
);
break;
case "neq":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) != Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) != Number(v.numberFilterPhrase.value[0])
);
break;
case "lt":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) < Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) < Number(v.numberFilterPhrase.value[0])
);
break;
case "le":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) <= Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) <= Number(v.numberFilterPhrase.value[0])
);
break;
case "gt":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) > Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) > Number(v.numberFilterPhrase.value[0])
);
break;
case "ge":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) >= Number(v.numberFilterPhrase.value[0])
item => Number(self.getDescendantProp(item, prop)) >= Number(v.numberFilterPhrase.value[0])
);
break;
case "bt":
temp = temp.filter(
item =>
Number(self.getDescendantProp(item, prop)) > Number(v.numberFilterPhrase.value[0]) &&
Number(self.getDescendantProp(item, prop)) <= Number(v.numberFilterPhrase.value[1])
item => {
const descendant = self.getDescendantProp(item, prop);
return Number(descendant) > Number(v.numberFilterPhrase.value[0]) &&
Number(descendant) <= Number(v.numberFilterPhrase.value[1]);
}
);
break;
}
Expand Down

0 comments on commit b2789b6

Please sign in to comment.