@tak-ps/vue-tabler 3.3.0 → 3.5.0
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/CHANGELOG.md +8 -0
- package/components/None.vue +49 -0
- package/components/Schema.vue +128 -0
- package/lib.js +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,14 @@
|
|
|
10
10
|
|
|
11
11
|
## Version History
|
|
12
12
|
|
|
13
|
+
### v3.5.0
|
|
14
|
+
|
|
15
|
+
- :rocket: Add `TablerNone` component for use when a list or property is empty
|
|
16
|
+
|
|
17
|
+
### v3.4.0
|
|
18
|
+
|
|
19
|
+
- :rocket: Add `TablerSchema` component for creating forms from basic JSON Schemas
|
|
20
|
+
|
|
13
21
|
### v3.3.0
|
|
14
22
|
|
|
15
23
|
- :rocket: Add `Human` mode (and make it the default) to `Epoch` and `EpochRange`
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class='card-body'>
|
|
3
|
+
<div class='d-flex justify-content-center' :class='{
|
|
4
|
+
"mt-4 mb-2": !compact
|
|
5
|
+
}'>
|
|
6
|
+
<NotesOffIcon v-if='compact' width='32' height='32' />
|
|
7
|
+
<NotesOffIcon v-else width='48' height='48' />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class='text-center' :class='{
|
|
11
|
+
"mb-4 mt-2": !compact
|
|
12
|
+
}'>
|
|
13
|
+
<div>No <span v-text='label'/></div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div v-if='create' @click='$emit("create")' class='d-flex justify-content-center my-4' :class='{
|
|
17
|
+
"my-4": !compact
|
|
18
|
+
}'>
|
|
19
|
+
<div class='btn btn-primary'><span>Create <span v-text='label'/></span></div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
import {
|
|
26
|
+
NotesOffIcon
|
|
27
|
+
} from 'vue-tabler-icons'
|
|
28
|
+
|
|
29
|
+
export default {
|
|
30
|
+
name: 'TablerNone',
|
|
31
|
+
props: {
|
|
32
|
+
label: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: 'Items'
|
|
35
|
+
},
|
|
36
|
+
compact: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
create: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: true
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
components: {
|
|
46
|
+
NotesOffIcon
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</script>
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class='px-2 py-2'>
|
|
3
|
+
<div :key='key' v-for='key in Object.keys(schema.properties)' class='py-2 floating-input'>
|
|
4
|
+
<template v-if='schema.properties[key].enum'>
|
|
5
|
+
<TablerEnum
|
|
6
|
+
:label='key'
|
|
7
|
+
:disabled='disabled'
|
|
8
|
+
v-model='data[key]'
|
|
9
|
+
:options='schema.properties[key].enum'
|
|
10
|
+
:default='schema.properties[key].default'
|
|
11
|
+
/>
|
|
12
|
+
</template>
|
|
13
|
+
<template v-else-if='schema.properties[key].type === "string"'>
|
|
14
|
+
<TablerInput :label='key' :disabled='disabled' v-model='data[key]'/>
|
|
15
|
+
</template>
|
|
16
|
+
<template v-else-if='schema.properties[key].type === "boolean"'>
|
|
17
|
+
<TablerToggle :label='key' :disabled='disabled' v-model='data[key]'/>
|
|
18
|
+
</template>
|
|
19
|
+
<template v-else-if='schema.properties[key].type === "array"'>
|
|
20
|
+
<div class='d-flex'>
|
|
21
|
+
<label class='form-label' v-text='key'/>
|
|
22
|
+
<div class='ms-auto'>
|
|
23
|
+
<PlusIcon v-if='!disabled' @click='push(key)' class='cursor-pointer'/>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div :key='i' v-for='(arr, i) of data[key]' class='border rounded my-2 py-2 mx-2 px-2'>
|
|
28
|
+
<div class='d-flex'>
|
|
29
|
+
<div class='mx-2 my-2'>Entry <span v-text='i + 1'/></div>
|
|
30
|
+
<div class='ms-auto mx-2 my-2'>
|
|
31
|
+
<TrashIcon v-if='!disabled' @click='data[key].splice(i, 1)' class='cursor-pointer'/>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<GenericSchema :schema='schema.properties[key].items' :disabled='disabled' v-model='data[key][i]' />
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
<template v-else>
|
|
39
|
+
<div class='row'>
|
|
40
|
+
<TablerInput :label='key' :rows='3' :disabled='disabled' v-model='data[key]'/>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script>
|
|
48
|
+
import TablerInput from './Input.vue';
|
|
49
|
+
import TablerToggle from './Toggle.vue';
|
|
50
|
+
import TablerEnum from './Enum.vue';
|
|
51
|
+
import {
|
|
52
|
+
PlusIcon,
|
|
53
|
+
TrashIcon,
|
|
54
|
+
} from 'vue-tabler-icons'
|
|
55
|
+
|
|
56
|
+
export default {
|
|
57
|
+
name: 'TablerSchema',
|
|
58
|
+
props: {
|
|
59
|
+
modelValue: {
|
|
60
|
+
type: Object,
|
|
61
|
+
required: true
|
|
62
|
+
},
|
|
63
|
+
schema: {
|
|
64
|
+
type: Object,
|
|
65
|
+
required: true
|
|
66
|
+
},
|
|
67
|
+
disabled: {
|
|
68
|
+
type: Boolean,
|
|
69
|
+
default: false
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
data: function() {
|
|
73
|
+
return {
|
|
74
|
+
data: {},
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
watch: {
|
|
78
|
+
data: {
|
|
79
|
+
deep: true,
|
|
80
|
+
handler: function() {
|
|
81
|
+
this.$emit('update:modelValue', this.data);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
mounted: async function() {
|
|
86
|
+
this.data = JSON.parse(JSON.stringify(this.modelValue));
|
|
87
|
+
|
|
88
|
+
for (const key of Object.keys(this.schema.properties)) {
|
|
89
|
+
if (this.schema.properties[key].display === 'table') {
|
|
90
|
+
this.edit[key] = new Map();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (this.schema.type === 'object' && this.schema.properties) {
|
|
95
|
+
for (const key in this.schema.properties) {
|
|
96
|
+
if (!this.data[key] && this.schema.properties[key].type === 'array') {
|
|
97
|
+
this.data[key] = [];
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
methods: {
|
|
103
|
+
remove: function(key, arr, i) {
|
|
104
|
+
this.edit[key].delete(arr);
|
|
105
|
+
this.data[key].splice(i, 1)
|
|
106
|
+
},
|
|
107
|
+
push: function(key) {
|
|
108
|
+
if (!this.schema.properties[key].items) this.data[key].push('');
|
|
109
|
+
if (this.schema.properties[key].items.type === 'object') {
|
|
110
|
+
this.data[key].push({});
|
|
111
|
+
} else if (this.schema.properties[key].items.type === 'array') {
|
|
112
|
+
this.data[key].push([]);
|
|
113
|
+
} else if (this.schema.properties[key].items.type === 'boolean') {
|
|
114
|
+
this.data[key].push(false);
|
|
115
|
+
} else {
|
|
116
|
+
this.data[key].push('');
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
components: {
|
|
121
|
+
PlusIcon,
|
|
122
|
+
TrashIcon,
|
|
123
|
+
TablerInput,
|
|
124
|
+
TablerToggle,
|
|
125
|
+
TablerEnum
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
</script>
|
package/lib.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { default as TablerNone } from './components/None.vue'
|
|
1
2
|
export { default as TablerError } from './components/Err.vue'
|
|
2
3
|
export { default as TablerList } from './components/List.vue'
|
|
3
4
|
export { default as TablerHelp } from './components/Help.vue'
|
|
@@ -14,3 +15,4 @@ export { default as TablerEpoch } from './components/Epoch.vue';
|
|
|
14
15
|
export { default as TablerEpochRange } from './components/EpochRange.vue';
|
|
15
16
|
export { default as TablerMarkdown } from './components/Markdown.vue';
|
|
16
17
|
export { default as TablerDelete } from './components/Delete.vue';
|
|
18
|
+
export { default as TablerSchema } from './components/Schema.vue';
|