@qikdev/vue-ui 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/content/browser.vue +23 -7
- package/src/filter/FilterBuilder.vue +3 -6
- package/src/form/field.vue +3 -0
- package/src/form/inputs/content-select.vue +2 -2
- package/src/form/inputs/textfield.vue +24 -4
- package/src/layout/flex-column.vue +4 -0
- package/src/layout/flex-row.vue +4 -0
- package/src/modal/ContentModal.vue +0 -1
- package/src/ui/button.vue +2 -1
package/package.json
CHANGED
package/src/content/browser.vue
CHANGED
|
@@ -7,17 +7,23 @@
|
|
|
7
7
|
<flex-cell flex>
|
|
8
8
|
<native-table :total="totalItems" :selectAll="selectAll" :deselectAll="deselectAllFunction" :actions="false" :selection="manager.items" @click:row="rowClicked" @select:row:toggle="rowToggled" @select:multiple="selectMultiple" @deselect:multiple="deselectMultiple" :rows="items" :columns="columns" />
|
|
9
9
|
</flex-cell>
|
|
10
|
-
<flex-column style="max-width: 600px;">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
<flex-column class="filter-column" style="max-width: 600px;" v-if="showFilters">
|
|
11
|
+
<flex-body>
|
|
12
|
+
<search v-model="search" :loading="searching" :debounce="500" placeholder="Keyword Search" />
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<p></p>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
14
19
|
<filter-builder :definition="definition" v-model="filter" />
|
|
20
|
+
</flex-body>
|
|
15
21
|
</flex-column>
|
|
16
22
|
</flex-row>
|
|
17
23
|
</flex-column>
|
|
18
24
|
<flex-footer>
|
|
19
25
|
<div class="footer">
|
|
20
|
-
<flex-row center>
|
|
26
|
+
<flex-row center gap >
|
|
21
27
|
<flex-cell shrink class="text">
|
|
22
28
|
<native-select v-model="perPage" :field="perPageField">
|
|
23
29
|
Showing {{displayStartIndex}} to {{endIndex}} of {{totalItems}} total
|
|
@@ -25,8 +31,8 @@
|
|
|
25
31
|
</flex-cell>
|
|
26
32
|
<flex-cell>
|
|
27
33
|
</flex-cell>
|
|
28
|
-
<flex-cell shrink>
|
|
29
|
-
<flex-row center>
|
|
34
|
+
<flex-cell shrink v-if="totalPages > 1">
|
|
35
|
+
<flex-row gap center>
|
|
30
36
|
<flex-cell shrink class="text">
|
|
31
37
|
<native-select v-model="currentPage" :field="pageField">
|
|
32
38
|
Page {{currentPage}} of {{totalPages}}
|
|
@@ -56,6 +62,7 @@ import NativeTable from '../table/Table.vue';
|
|
|
56
62
|
|
|
57
63
|
import FilterBuilder from '../filter/FilterBuilder.vue';
|
|
58
64
|
import Selection from '../services/selection.js';
|
|
65
|
+
import Search from '../form/inputs/search.vue';
|
|
59
66
|
|
|
60
67
|
|
|
61
68
|
// import FilterRule from '../filter/FilterRule.vue';
|
|
@@ -69,6 +76,9 @@ export default {
|
|
|
69
76
|
type: String,
|
|
70
77
|
required: true,
|
|
71
78
|
},
|
|
79
|
+
showFilters:{
|
|
80
|
+
type:Boolean,
|
|
81
|
+
},
|
|
72
82
|
search: {
|
|
73
83
|
type: String,
|
|
74
84
|
},
|
|
@@ -101,6 +111,7 @@ export default {
|
|
|
101
111
|
NativeSelect,
|
|
102
112
|
NativeTable,
|
|
103
113
|
FilterBuilder,
|
|
114
|
+
Search,
|
|
104
115
|
// FilterRule,
|
|
105
116
|
},
|
|
106
117
|
async created() {
|
|
@@ -464,6 +475,11 @@ export default {
|
|
|
464
475
|
}
|
|
465
476
|
}
|
|
466
477
|
|
|
478
|
+
.filter-column {
|
|
479
|
+
padding:1em;
|
|
480
|
+
background: rgba(#000, 0.1);
|
|
481
|
+
}
|
|
482
|
+
|
|
467
483
|
|
|
468
484
|
.footer {
|
|
469
485
|
padding: 1em;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<flex-column class="filter-builder">
|
|
3
3
|
<flex-body>
|
|
4
4
|
<div class="filters">
|
|
5
|
-
<div class="top">
|
|
5
|
+
<div class="top" v-if="model.filters.length">
|
|
6
6
|
<div class="summary">
|
|
7
7
|
Match <native-select v-model="model.operator" :field="operatorField">
|
|
8
8
|
{{summary}}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
<filter-rule :enableRemove="model.filters.length > 1" :key="`rule-${index}`" @remove="removeRule(index)" :definition="definition" v-model="model.filters[index]" :index="index" v-for="(rule, index) in model.filters" />
|
|
13
|
-
<ux-button @click="addRule()">Add Rule</ux-button>
|
|
13
|
+
<ux-button @click="addRule()">Add Filter Rule</ux-button>
|
|
14
14
|
</div>
|
|
15
15
|
</flex-body>
|
|
16
16
|
</flex-column>
|
|
@@ -119,12 +119,9 @@ export default {
|
|
|
119
119
|
</script>
|
|
120
120
|
<style lang="scss" scoped>
|
|
121
121
|
.filter-builder {
|
|
122
|
-
|
|
122
|
+
|
|
123
123
|
|
|
124
124
|
|
|
125
|
-
.filters {
|
|
126
|
-
padding:0.7em;
|
|
127
|
-
}
|
|
128
125
|
|
|
129
126
|
.summary {
|
|
130
127
|
font-size: 0.8em;
|
package/src/form/field.vue
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<div class="items" v-if="model && model.length">
|
|
6
6
|
<item :key="item._id" :item="item" v-for="(item, index) in model">
|
|
7
7
|
<template #actions>
|
|
8
|
-
<ux-button icon @click="remove(item)">
|
|
8
|
+
<ux-button icon @click.stop.prevent="remove(item)">
|
|
9
9
|
<ux-icon icon="fa-times" />
|
|
10
10
|
</ux-button>
|
|
11
11
|
</template>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<div class="items">
|
|
17
17
|
<item :item="model">
|
|
18
18
|
<template #actions>
|
|
19
|
-
<ux-button icon @click="clear">
|
|
19
|
+
<ux-button icon @click.stop.prevent="clear">
|
|
20
20
|
<ux-icon icon="fa-times" />
|
|
21
21
|
</ux-button>
|
|
22
22
|
</template>
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
<flex-cell>
|
|
7
7
|
<div class="ux-text-wrap">
|
|
8
8
|
<span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
|
|
9
|
-
<input v-if="lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index]" />
|
|
10
|
-
<input v-if="!lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model[index]" />
|
|
9
|
+
<input :type="inputType" v-if="lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model.lazy="model[index]" />
|
|
10
|
+
<input :type="inputType" v-if="!lazy" class="ux-field-focus ux-text-input-multiple" :placeholder="actualPlaceholder" @focus="touch" ref="input" @keydown.enter.stop.prevent="add()" v-model="model[index]" />
|
|
11
11
|
<span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
|
|
12
12
|
</div>
|
|
13
13
|
</flex-cell>
|
|
@@ -22,11 +22,12 @@
|
|
|
22
22
|
<template v-else>
|
|
23
23
|
<div class="ux-text-wrap">
|
|
24
24
|
<span class="ux-text-prefix" v-if="prefix">{{prefix}}</span>
|
|
25
|
-
<input v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
|
|
26
|
-
<input v-if="!lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model="model" />
|
|
25
|
+
<input :type="inputType" v-if="lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model.lazy="model" />
|
|
26
|
+
<input :type="inputType" v-if="!lazy" ref="input" class="ux-field-focus ux-text-input-single" :placeholder="actualPlaceholder" @focus="touch" v-model="model" />
|
|
27
27
|
<span class="ux-text-suffix" v-if="suffix">{{suffix}}</span>
|
|
28
28
|
</div>
|
|
29
29
|
</template>
|
|
30
|
+
|
|
30
31
|
</template>
|
|
31
32
|
<script>
|
|
32
33
|
import InputMixin from './input-mixin';
|
|
@@ -42,6 +43,25 @@ export default {
|
|
|
42
43
|
},
|
|
43
44
|
mixins: [InputMixin],
|
|
44
45
|
computed: {
|
|
46
|
+
inputType() {
|
|
47
|
+
switch(this.field.widget) {
|
|
48
|
+
case 'password':
|
|
49
|
+
case 'email':
|
|
50
|
+
return this.field.widget;
|
|
51
|
+
break;
|
|
52
|
+
default:
|
|
53
|
+
|
|
54
|
+
switch(this.field.type) {
|
|
55
|
+
case 'email':
|
|
56
|
+
return 'email';
|
|
57
|
+
break;
|
|
58
|
+
default:
|
|
59
|
+
return 'text';
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
},
|
|
45
65
|
lazy() {
|
|
46
66
|
switch (this.type) {
|
|
47
67
|
case 'integer':
|
package/src/layout/flex-row.vue
CHANGED