@timus-networks/theme 1.0.104 → 1.0.106
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/components-js/ThemeTag.vue +18 -17
- package/components-ts/ThemeTag.vue +18 -17
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -57,19 +57,18 @@
|
|
|
57
57
|
<h1>Edit Dynamically</h1>
|
|
58
58
|
<p class="p-lg my-6">You can use the close event to add and remove tag dynamically.</p>
|
|
59
59
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
60
|
-
<el-tag
|
|
60
|
+
<el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="true" size="mini" @close="handleClose(tag)">
|
|
61
61
|
{{ tag }}
|
|
62
62
|
</el-tag>
|
|
63
63
|
<el-input
|
|
64
|
-
class="input-new-tag"
|
|
65
64
|
v-if="inputVisible"
|
|
66
|
-
v-model="inputValue"
|
|
67
65
|
ref="saveTagInput"
|
|
66
|
+
v-model="inputValue"
|
|
67
|
+
class="input-new-tag"
|
|
68
68
|
size="mini"
|
|
69
69
|
@keyup.enter.native="handleInputConfirm"
|
|
70
70
|
@blur="handleInputConfirm"
|
|
71
|
-
|
|
72
|
-
</el-input>
|
|
71
|
+
/>
|
|
73
72
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
|
74
73
|
</div>
|
|
75
74
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
@@ -85,17 +84,6 @@ import Vue from 'vue';
|
|
|
85
84
|
|
|
86
85
|
export default Vue.extend({
|
|
87
86
|
name: 'TimusButtonSample',
|
|
88
|
-
computed: {
|
|
89
|
-
gridSize() {
|
|
90
|
-
const grids = {
|
|
91
|
-
5: 'grid-cols-5',
|
|
92
|
-
6: 'grid-cols-6',
|
|
93
|
-
7: 'grid-cols-7',
|
|
94
|
-
8: 'grid-cols-8',
|
|
95
|
-
};
|
|
96
|
-
return grids;
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
87
|
data() {
|
|
100
88
|
return {
|
|
101
89
|
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
|
|
@@ -117,6 +105,18 @@ export default Vue.extend({
|
|
|
117
105
|
],
|
|
118
106
|
};
|
|
119
107
|
},
|
|
108
|
+
computed: {
|
|
109
|
+
gridSize() {
|
|
110
|
+
const grids = {
|
|
111
|
+
5: 'grid-cols-5',
|
|
112
|
+
6: 'grid-cols-6',
|
|
113
|
+
7: 'grid-cols-7',
|
|
114
|
+
8: 'grid-cols-8',
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
return grids;
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
120
|
methods: {
|
|
121
121
|
handleClose(tag) {
|
|
122
122
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
|
@@ -130,7 +130,8 @@ export default Vue.extend({
|
|
|
130
130
|
},
|
|
131
131
|
|
|
132
132
|
handleInputConfirm() {
|
|
133
|
-
|
|
133
|
+
const { inputValue } = this;
|
|
134
|
+
|
|
134
135
|
if (inputValue) {
|
|
135
136
|
this.dynamicTags.push(inputValue);
|
|
136
137
|
}
|
|
@@ -57,19 +57,18 @@
|
|
|
57
57
|
<h1>Edit Dynamically</h1>
|
|
58
58
|
<p class="p-lg my-6">You can use the close event to add and remove tag dynamically.</p>
|
|
59
59
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
60
|
-
<el-tag
|
|
60
|
+
<el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="true" size="mini" @close="handleClose(tag)">
|
|
61
61
|
{{ tag }}
|
|
62
62
|
</el-tag>
|
|
63
63
|
<el-input
|
|
64
|
-
class="input-new-tag"
|
|
65
64
|
v-if="inputVisible"
|
|
66
|
-
v-model="inputValue"
|
|
67
65
|
ref="saveTagInput"
|
|
66
|
+
v-model="inputValue"
|
|
67
|
+
class="input-new-tag"
|
|
68
68
|
size="mini"
|
|
69
69
|
@keyup.enter.native="handleInputConfirm"
|
|
70
70
|
@blur="handleInputConfirm"
|
|
71
|
-
|
|
72
|
-
</el-input>
|
|
71
|
+
/>
|
|
73
72
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
|
74
73
|
</div>
|
|
75
74
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
@@ -85,17 +84,6 @@ import Vue from 'vue';
|
|
|
85
84
|
|
|
86
85
|
export default Vue.extend({
|
|
87
86
|
name: 'TimusButtonSample',
|
|
88
|
-
computed: {
|
|
89
|
-
gridSize() {
|
|
90
|
-
const grids = {
|
|
91
|
-
5: 'grid-cols-5',
|
|
92
|
-
6: 'grid-cols-6',
|
|
93
|
-
7: 'grid-cols-7',
|
|
94
|
-
8: 'grid-cols-8',
|
|
95
|
-
};
|
|
96
|
-
return grids;
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
87
|
data() {
|
|
100
88
|
return {
|
|
101
89
|
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
|
|
@@ -117,6 +105,18 @@ export default Vue.extend({
|
|
|
117
105
|
],
|
|
118
106
|
};
|
|
119
107
|
},
|
|
108
|
+
computed: {
|
|
109
|
+
gridSize() {
|
|
110
|
+
const grids = {
|
|
111
|
+
5: 'grid-cols-5',
|
|
112
|
+
6: 'grid-cols-6',
|
|
113
|
+
7: 'grid-cols-7',
|
|
114
|
+
8: 'grid-cols-8',
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
return grids;
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
120
|
methods: {
|
|
121
121
|
handleClose(tag) {
|
|
122
122
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
|
@@ -130,7 +130,8 @@ export default Vue.extend({
|
|
|
130
130
|
},
|
|
131
131
|
|
|
132
132
|
handleInputConfirm() {
|
|
133
|
-
|
|
133
|
+
const { inputValue } = this;
|
|
134
|
+
|
|
134
135
|
if (inputValue) {
|
|
135
136
|
this.dynamicTags.push(inputValue);
|
|
136
137
|
}
|