-
Notifications
You must be signed in to change notification settings - Fork 0
/
List.mjs
59 lines (55 loc) · 1.71 KB
/
List.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
* 'To Do' list widget.
*
* @namespace Fl64_Habr_Vue_Front_Widget_ToDo_List
*/
// MODULE'S VARS
const NS = 'Fl64_Habr_Vue_Front_Widget_ToDo_List';
// MODULE'S FUNCTIONS
/**
* Factory to create template for new Vue component instances.
*
* @memberOf Fl64_Habr_Vue_Front_Widget_ToDo_List
* @returns {Fl64_Habr_Vue_Front_Widget_ToDo_List.vueCompTmpl}
*/
export default function Factory(spec) {
// EXTRACT DEPS
/** @type {Fl64_Habr_Vue_Front_Defaults} */
const DEF = spec['Fl64_Habr_Vue_Front_Defaults$'];
/** @type {Fl64_Habr_Vue_Front_Widget_ToDo_Item.vueCompTmpl} */
const todoItem = spec['Fl64_Habr_Vue_Front_Widget_ToDo_Item$'];
// DEFINE WORKING VARS
const template = `
<q-card-section>
<div v-if="!items.length" class="text-center">{{$t('widget.todo.list.empty')}}</div>
<todo-item v-for="(item, id) in items" :item="item" :id="id" @onDelete="deleteItem" @onUpdate="updateItem"/>
</q-card-section>
`;
// COMPOSE RESULT
/**
* Template to create new component instances using Vue.
*
* @const {Object} vueCompTmpl
* @memberOf Fl64_Habr_Vue_Front_Widget_ToDo_List
*/
return {
teq: {package: DEF.NAME},
name: NS,
template,
components: {todoItem},
props: {
items: null
},
methods: {
deleteItem(id) {
this.items.splice(id, 1);
localStorage.setItem(DEF.DATA_TODO, JSON.stringify(this.items));
},
updateItem() {
localStorage.setItem(DEF.DATA_TODO, JSON.stringify(this.items));
}
},
};
}
// to get namespace on debug
Object.defineProperty(Factory, 'name', {value: `${NS}.${Factory.name}`});