@fy-/fws-vue 1.2.7 → 1.2.9
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";
|
|
@@ -110,20 +64,22 @@ const removeTag = (index: number) => {
|
|
|
110
64
|
};
|
|
111
65
|
|
|
112
66
|
const removeLastTag = () => {
|
|
113
|
-
if (!
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
67
|
+
if (!import.meta.env.SSR) {
|
|
68
|
+
if (!textInput.value) return;
|
|
69
|
+
if (textInput.value.innerText === "") {
|
|
70
|
+
model.value.pop();
|
|
71
|
+
} else {
|
|
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
|
+
}
|
|
127
83
|
}
|
|
128
84
|
};
|
|
129
85
|
const focusInput = () => {
|
|
@@ -133,18 +89,66 @@ const focusInput = () => {
|
|
|
133
89
|
};
|
|
134
90
|
|
|
135
91
|
const handlePaste = (e: any) => {
|
|
136
|
-
if (!
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
92
|
+
if (!import.meta.env.SSR) {
|
|
93
|
+
if (!textInput.value) return;
|
|
94
|
+
|
|
95
|
+
// @ts-ignore
|
|
96
|
+
const text = (e.clipboardData || window.clipboardData).getData("text");
|
|
97
|
+
const separatorsRegex = new RegExp(props.separators.join("|"), "g");
|
|
98
|
+
const pasteText = text.replace(separatorsRegex, ",");
|
|
99
|
+
textInput.value.innerText += pasteText;
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
addTag();
|
|
102
|
+
}
|
|
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;
|