@fy-/fws-vue 1.2.7 → 1.2.8
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.
|
@@ -4,7 +4,6 @@ import { computed, onMounted, onUnmounted, ref, toRef } from "vue";
|
|
|
4
4
|
import type { ErrorObject } from "@vuelidate/core";
|
|
5
5
|
import { useTranslation } from "../../composables/translations";
|
|
6
6
|
import DefaultTagInput from "./DefaultTagInput.vue";
|
|
7
|
-
import VueDatePicker from "@vuepic/vue-datepicker";
|
|
8
7
|
|
|
9
8
|
type modelValueType = string | number | string[] | number[] | undefined;
|
|
10
9
|
|
|
@@ -1,49 +1,3 @@
|
|
|
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
|
-
|
|
47
1
|
<script setup lang="ts">
|
|
48
2
|
import { ref, computed, onMounted } from "vue";
|
|
49
3
|
type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
|
|
@@ -114,16 +68,20 @@ const removeLastTag = () => {
|
|
|
114
68
|
if (textInput.value.innerText === "") {
|
|
115
69
|
model.value.pop();
|
|
116
70
|
} else {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
71
|
+
try {
|
|
72
|
+
const currentLength = textInput.value.innerText.length;
|
|
73
|
+
textInput.value.innerText = textInput.value.innerText.slice(0, -1);
|
|
74
|
+
|
|
75
|
+
const range = document.createRange();
|
|
76
|
+
const sel = window.getSelection();
|
|
77
|
+
range.selectNodeContents(textInput.value);
|
|
78
|
+
range.collapse(false);
|
|
79
|
+
if (!sel) return;
|
|
80
|
+
sel.removeAllRanges();
|
|
81
|
+
sel.addRange(range);
|
|
82
|
+
} catch (e) {
|
|
83
|
+
console.error(e);
|
|
84
|
+
}
|
|
127
85
|
}
|
|
128
86
|
};
|
|
129
87
|
const focusInput = () => {
|
|
@@ -145,6 +103,52 @@ const handlePaste = (e: any) => {
|
|
|
145
103
|
};
|
|
146
104
|
</script>
|
|
147
105
|
|
|
106
|
+
<template>
|
|
107
|
+
<ClientOnly
|
|
108
|
+
:class="`tags-input ${$props.error ? 'error' : ''}`"
|
|
109
|
+
@click="focusInput"
|
|
110
|
+
@keydown.delete.prevent="removeLastTag"
|
|
111
|
+
@keydown.enter.prevent="addTag"
|
|
112
|
+
>
|
|
113
|
+
<span
|
|
114
|
+
v-for="(tag, index) in model"
|
|
115
|
+
:key="index"
|
|
116
|
+
class="tag"
|
|
117
|
+
:class="{
|
|
118
|
+
red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
|
|
119
|
+
[color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
|
|
120
|
+
}"
|
|
121
|
+
>
|
|
122
|
+
{{ tag }}
|
|
123
|
+
<button type="button" @click.prevent="removeTag(index)">
|
|
124
|
+
<svg
|
|
125
|
+
class="w-4 h-4"
|
|
126
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
127
|
+
fill="none"
|
|
128
|
+
viewBox="0 0 24 24"
|
|
129
|
+
stroke-width="1.5"
|
|
130
|
+
stroke="currentColor"
|
|
131
|
+
>
|
|
132
|
+
<path
|
|
133
|
+
stroke-linecap="round"
|
|
134
|
+
stroke-linejoin="round"
|
|
135
|
+
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"
|
|
136
|
+
/>
|
|
137
|
+
</svg>
|
|
138
|
+
</button>
|
|
139
|
+
</span>
|
|
140
|
+
<div
|
|
141
|
+
contenteditable
|
|
142
|
+
class="input"
|
|
143
|
+
:id="`tags_${id}`"
|
|
144
|
+
ref="textInput"
|
|
145
|
+
@input="handleInput"
|
|
146
|
+
@paste.prevent="handlePaste"
|
|
147
|
+
placeholder="Add a tag..."
|
|
148
|
+
></div>
|
|
149
|
+
</ClientOnly>
|
|
150
|
+
</template>
|
|
151
|
+
|
|
148
152
|
<style scoped>
|
|
149
153
|
.tags-input {
|
|
150
154
|
cursor: text;
|