8000 Implemented basic ListView templates. Work in progress for #10 · lakexyde/nativescript-vue@0b27670 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0b27670

Browse files
rigor789rigor789
committed
Implemented basic ListView templates. Work in progress for nativescript-vue#10 
1 parent cefd686 commit 0b27670

File tree

8 files changed

+166
-6
lines changed

8 files changed

+166
-6
lines changed

‎nativescript-vue/dist/index.js

Lines changed: 60 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nativescript-vue/dist/index.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nativescript-vue/platform/nativescript/element-registry.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ registerElement("ListPicker", () => require("ui/list-picker").ListPicker, {
7777
event: 'selectedIndexChange'
7878
}
7979
});
80-
registerElement("ListView", () => require("ui/list-view").ListView);
80+
registerElement("NativeListView", () => require("ui/list-view").ListView);
8181
registerElement("Page", () => require("ui/page").Page);
8282
registerElement("Placeholder", () => require("ui/placeholder").Placeholder);
8383
registerElement("Progress", () => require("ui/progress").Progress);

‎nativescript-vue/platform/nativescript/renderer/view-node.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export default class ViewNode {
9696

9797
appendChild(child, atIndex = -1) {
9898
child.parent = this
99+
99100
if (isLayout(this.view)) {
100101
if (child.view.parent === this.view) {
101102
let index = this.view.getChildIndex(child.view)

‎nativescript-vue/platform/nativescript/runtime/components/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import ListView from './list-view'
2+
3+
export default {
4+
ListView
5+
}

‎nativescript-vue/platform/nativescript/runtime/components/list-view.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
<list-view :items="items">
3+
<template scope="list">
4+
<stack-layout>
5+
<label>{{ list.index }} {{ list.item.prop1 }}</label>
6+
</stack-layout>
7+
</template>
8+
</list-view>
9+
*/
10+
import {Label} from 'ui/label'
11+
import {createElement} from '../node-ops'
12+
13+
export default {
14+
name: 'list-view',
15+
// abstract: true,
16+
17+
props: {
18+
items: {
19+
type: Array,
20+
required: true
21+
}
22+
},
23+
24+
render() {
25+
let _vm = this
26+
let _h = _vm.$createElement
27+
let _c = _vm._self._c || _h
28+
29+
let $index = 0
30+
return _c('native-list-view', {
31+
attrs: {
32+
items: _vm.items,
33+
itemTemplate: function () {
34+
let item = _vm.items[$index]
35+
if (typeof item === 'object') {
36+
item = Object.assign({}, {$index}, item)
37+
} else {
38+
item = Object.assign({}, {$index, value: item})
39+
}
40+
41+
let res = _vm.$scopedSlots.default(item)
42+
let vnode = res[0]
43+
44+
let $el = _vm.__patch__(
45+
undefined /* $el */,
46+
vnode
47+
)
48+
49+
$index++
50+
return $el.view
51+
}
52+
// itemTemplate: '<Label text="{{ $value }}" padding="20" backgroundColor="red"/>'
53+
}
54+
})
55+
}
56+
}

‎nativescript-vue/platform/nativescript/runtime/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import {compileToFunctions} from '../compiler/index'
44
import {patch} from './patch'
55
import {mountComponent} from 'core/instance/lifecycle'
66
import platformDirectives from './directives/index'
7-
// import platformComponents from './components/index'
8-
const platformComponents = {}
7+
import platformComponents from './components/index'
98

109
import {
1110
query,

‎vue-sample/app/app-with-list-view.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const Vue = require('nativescript-vue/dist/index')
2+
3+
new Vue({
4+
data: {
5+
items: ['foo', 'bar', 'fizz', 'buzz'],
6+
items2: [
7+
{name: 'john'},
8+
{name: 'jane'},
9+
{name: 'jack'},
10+
{name: 'joe'},
11+
]
12+
},
13+
14+
template: `
15+
<page>
16+
<stack-layout>
17+
<label text="List 1 with primitive values" style="font-size: 30; text-align: center; margin: 30;"></label>
18+
19+
<list-view :items="items">
20+
<template scope="item">
21+
<stack-layout>
22+
<label :text="item.$index"></label>
23+
<label :text="item.value"></label>
24+
</stack-layout>
25+
</template>
26+
</list-view>
27+
28+
<label text="List 2 with objects" style="font-size: 30; text-align: center; margin: 30;"></label>
29+
30+
<list-view :items="items2">
31+
<template scope="item">
32+
<stack-layout orientation="horizontal" style="padding: 20">
33+
<label :text="item.$index"></label>
34+
<label :text="item.name" style="margin-left: 10"></label>
35+
</stack-layout>
36+
</template>
37+
</list-view>
38+
</stack-layout>
39+
</page>
40+
`,
41+
}).$start()

0 commit comments

Comments
 (0)
0