@fy-/fws-vue 1.6.0 → 1.6.1
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.
|
@@ -1,3 +1,49 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
:class="`tags-input ${$props.error ? 'error' : ''}`"
|
|
4
|
+
@click="focusInput"
|
|
5
|
+
@keydown.delete.prevent="removeLastTag"
|
|
6
|
+
@keydown.enter.prevent="addTag"
|
|
7
|
+
>
|
|
8
|
+
<span
|
|
9
|
+
v-for="(tag, index) in model"
|
|
10
|
+
:key="index"
|
|
11
|
+
class="tag"
|
|
12
|
+
:class="{
|
|
13
|
+
red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
|
|
14
|
+
[color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
|
|
15
|
+
}"
|
|
16
|
+
>
|
|
17
|
+
{{ tag }}
|
|
18
|
+
<button type="button" @click.prevent="removeTag(index)">
|
|
19
|
+
<svg
|
|
20
|
+
class="w-4 h-4"
|
|
21
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
22
|
+
fill="none"
|
|
23
|
+
viewBox="0 0 24 24"
|
|
24
|
+
stroke-width="1.5"
|
|
25
|
+
stroke="currentColor"
|
|
26
|
+
>
|
|
27
|
+
<path
|
|
28
|
+
stroke-linecap="round"
|
|
29
|
+
stroke-linejoin="round"
|
|
30
|
+
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
31
|
+
/>
|
|
32
|
+
</svg>
|
|
33
|
+
</button>
|
|
34
|
+
</span>
|
|
35
|
+
<div
|
|
36
|
+
contenteditable
|
|
37
|
+
class="input"
|
|
38
|
+
:id="`tags_${id}`"
|
|
39
|
+
ref="textInput"
|
|
40
|
+
@input="handleInput"
|
|
41
|
+
@paste.prevent="handlePaste"
|
|
42
|
+
placeholder="Add a tag..."
|
|
43
|
+
></div>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
1
47
|
<script setup lang="ts">
|
|
2
48
|
import { ref, computed, onMounted } from "vue";
|
|
3
49
|
type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
|
|
@@ -68,23 +114,18 @@ const removeLastTag = () => {
|
|
|
68
114
|
if (textInput.value.innerText === "") {
|
|
69
115
|
model.value.pop();
|
|
70
116
|
} else {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
sel.addRange(range);
|
|
82
|
-
} catch (e) {
|
|
83
|
-
console.error(e);
|
|
84
|
-
}
|
|
117
|
+
const currentLength = textInput.value.innerText.length;
|
|
118
|
+
textInput.value.innerText = textInput.value.innerText.slice(0, -1);
|
|
119
|
+
|
|
120
|
+
const range = document.createRange();
|
|
121
|
+
const sel = window.getSelection();
|
|
122
|
+
range.selectNodeContents(textInput.value);
|
|
123
|
+
range.collapse(false);
|
|
124
|
+
if (!sel) return;
|
|
125
|
+
sel.removeAllRanges();
|
|
126
|
+
sel.addRange(range);
|
|
85
127
|
}
|
|
86
128
|
};
|
|
87
|
-
|
|
88
129
|
const focusInput = () => {
|
|
89
130
|
if (!textInput.value) return;
|
|
90
131
|
|
|
@@ -104,52 +145,6 @@ const handlePaste = (e: any) => {
|
|
|
104
145
|
};
|
|
105
146
|
</script>
|
|
106
147
|
|
|
107
|
-
<template>
|
|
108
|
-
<ClientOnly
|
|
109
|
-
:class="`tags-input ${$props.error ? 'error' : ''}`"
|
|
110
|
-
@click="focusInput"
|
|
111
|
-
@keydown.enter.prevent="addTag"
|
|
112
|
-
@keydown.backspace.prevent="removeLastTag"
|
|
113
|
-
>
|
|
114
|
-
<span
|
|
115
|
-
v-for="(tag, index) in model"
|
|
116
|
-
:key="index"
|
|
117
|
-
class="tag"
|
|
118
|
-
:class="{
|
|
119
|
-
red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
|
|
120
|
-
[color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
|
|
121
|
-
}"
|
|
122
|
-
>
|
|
123
|
-
{{ tag }}
|
|
124
|
-
<button type="button" @click.prevent="removeTag(index)">
|
|
125
|
-
<svg
|
|
126
|
-
class="w-4 h-4"
|
|
127
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
128
|
-
fill="none"
|
|
129
|
-
viewBox="0 0 24 24"
|
|
130
|
-
stroke-width="1.5"
|
|
131
|
-
stroke="currentColor"
|
|
132
|
-
>
|
|
133
|
-
<path
|
|
134
|
-
stroke-linecap="round"
|
|
135
|
-
stroke-linejoin="round"
|
|
136
|
-
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
137
|
-
/>
|
|
138
|
-
</svg>
|
|
139
|
-
</button>
|
|
140
|
-
</span>
|
|
141
|
-
<div
|
|
142
|
-
contenteditable
|
|
143
|
-
class="input"
|
|
144
|
-
:id="`tags_${id}`"
|
|
145
|
-
ref="textInput"
|
|
146
|
-
@input="handleInput"
|
|
147
|
-
@paste.prevent="handlePaste"
|
|
148
|
-
placeholder="Add a tag..."
|
|
149
|
-
></div>
|
|
150
|
-
</ClientOnly>
|
|
151
|
-
</template>
|
|
152
|
-
|
|
153
148
|
<style scoped>
|
|
154
149
|
.tags-input {
|
|
155
150
|
cursor: text;
|