@fy-/fws-vue 2.0.55 → 2.0.56
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,51 +1,57 @@
|
|
|
1
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>
|
|
2
|
+
<div>
|
|
35
3
|
<div
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
4
|
+
:class="`tags-input ${$props.error ? 'error' : ''}`"
|
|
5
|
+
@click="focusInput"
|
|
6
|
+
@keydown.delete.prevent="removeLastTag"
|
|
7
|
+
@keydown.enter.prevent="addTag"
|
|
8
|
+
>
|
|
9
|
+
<span
|
|
10
|
+
v-for="(tag, index) in model"
|
|
11
|
+
:key="index"
|
|
12
|
+
class="tag"
|
|
13
|
+
:class="{
|
|
14
|
+
red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
|
|
15
|
+
[color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
|
|
16
|
+
}"
|
|
17
|
+
>
|
|
18
|
+
{{ tag }}
|
|
19
|
+
<button type="button" @click.prevent="removeTag(index)">
|
|
20
|
+
<svg
|
|
21
|
+
class="w-4 h-4"
|
|
22
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
23
|
+
fill="none"
|
|
24
|
+
viewBox="0 0 24 24"
|
|
25
|
+
stroke-width="1.5"
|
|
26
|
+
stroke="currentColor"
|
|
27
|
+
>
|
|
28
|
+
<path
|
|
29
|
+
stroke-linecap="round"
|
|
30
|
+
stroke-linejoin="round"
|
|
31
|
+
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"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
</button>
|
|
35
|
+
</span>
|
|
36
|
+
<div
|
|
37
|
+
contenteditable
|
|
38
|
+
class="input"
|
|
39
|
+
:id="`tags_${id}`"
|
|
40
|
+
ref="textInput"
|
|
41
|
+
@input="handleInput"
|
|
42
|
+
@paste.prevent="handlePaste"
|
|
43
|
+
placeholder="Add a tag..."
|
|
44
|
+
></div>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="flex justify-end mt-1" v-if="copyButton" @click="copyText">
|
|
47
|
+
<button class="btn primary small">Copy tags</button>
|
|
48
|
+
</div>
|
|
44
49
|
</div>
|
|
45
50
|
</template>
|
|
46
51
|
|
|
47
52
|
<script setup lang="ts">
|
|
48
53
|
import { ref, computed, onMounted } from "vue";
|
|
54
|
+
import { useEventBus } from "../../composables/event-bus";
|
|
49
55
|
type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
|
|
50
56
|
|
|
51
57
|
const props = withDefaults(
|
|
@@ -59,8 +65,10 @@ const props = withDefaults(
|
|
|
59
65
|
help?: string;
|
|
60
66
|
maxLenghtPerTag?: number;
|
|
61
67
|
error?: string;
|
|
68
|
+
copyButton?: boolean;
|
|
62
69
|
}>(),
|
|
63
70
|
{
|
|
71
|
+
copyButton: true,
|
|
64
72
|
maxLenghtPerTag: 0,
|
|
65
73
|
color: "blue",
|
|
66
74
|
label: "Tags",
|
|
@@ -84,6 +92,16 @@ onMounted(() => {
|
|
|
84
92
|
focusInput();
|
|
85
93
|
}
|
|
86
94
|
});
|
|
95
|
+
const eventBus = useEventBus();
|
|
96
|
+
const copyText = async () => {
|
|
97
|
+
const text = model.value.join(", ");
|
|
98
|
+
await navigator.clipboard.writeText(text);
|
|
99
|
+
eventBus.emit("SendNotif", {
|
|
100
|
+
title: "Text copied!",
|
|
101
|
+
type: "success",
|
|
102
|
+
time: 2500,
|
|
103
|
+
});
|
|
104
|
+
};
|
|
87
105
|
|
|
88
106
|
const handleInput = (event: any) => {
|
|
89
107
|
const separatorsRegex = new RegExp(props.separators.join("|"));
|