@fy-/fws-vue 0.3.29 → 0.3.31
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.
|
@@ -154,6 +154,12 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
154
154
|
/>
|
|
155
155
|
</div>
|
|
156
156
|
<div v-if="type == 'chips' || type == 'tags'">
|
|
157
|
+
<label
|
|
158
|
+
:for="id"
|
|
159
|
+
v-if="label || placeholder"
|
|
160
|
+
class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
|
|
161
|
+
>{{ label ? label : placeholder }}
|
|
162
|
+
</label>
|
|
157
163
|
<!-- @vue-skip -->
|
|
158
164
|
<DefaultTagInput
|
|
159
165
|
v-model="model"
|
|
@@ -1,46 +1,38 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
>
|
|
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 v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
|
|
9
|
+
{{ tag }}
|
|
10
|
+
<button type="button" @click.prevent="removeTag(index)">
|
|
11
|
+
<svg
|
|
12
|
+
class="w-4 h-4"
|
|
13
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
14
|
+
fill="none"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
stroke-width="1.5"
|
|
17
|
+
stroke="currentColor"
|
|
18
|
+
>
|
|
19
|
+
<path
|
|
20
|
+
stroke-linecap="round"
|
|
21
|
+
stroke-linejoin="round"
|
|
22
|
+
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"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
9
27
|
<div
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<svg
|
|
19
|
-
class="w-4 h-4"
|
|
20
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
-
fill="none"
|
|
22
|
-
viewBox="0 0 24 24"
|
|
23
|
-
stroke-width="1.5"
|
|
24
|
-
stroke="currentColor"
|
|
25
|
-
>
|
|
26
|
-
<path
|
|
27
|
-
stroke-linecap="round"
|
|
28
|
-
stroke-linejoin="round"
|
|
29
|
-
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"
|
|
30
|
-
/>
|
|
31
|
-
</svg>
|
|
32
|
-
</button>
|
|
33
|
-
</span>
|
|
34
|
-
<div
|
|
35
|
-
contenteditable
|
|
36
|
-
class="input"
|
|
37
|
-
:id="`tags_${id}`"
|
|
38
|
-
ref="textInput"
|
|
39
|
-
@input="handleInput"
|
|
40
|
-
@paste.prevent="handlePaste"
|
|
41
|
-
placeholder="Add a tag..."
|
|
42
|
-
></div>
|
|
43
|
-
</div>
|
|
28
|
+
contenteditable
|
|
29
|
+
class="input"
|
|
30
|
+
:id="`tags_${id}`"
|
|
31
|
+
ref="textInput"
|
|
32
|
+
@input="handleInput"
|
|
33
|
+
@paste.prevent="handlePaste"
|
|
34
|
+
placeholder="Add a tag..."
|
|
35
|
+
></div>
|
|
44
36
|
</div>
|
|
45
37
|
</template>
|
|
46
38
|
|
|
@@ -56,6 +48,8 @@ const props = withDefaults(
|
|
|
56
48
|
id: string;
|
|
57
49
|
separators?: string[];
|
|
58
50
|
autofocus?: boolean;
|
|
51
|
+
help?: string;
|
|
52
|
+
error?: string;
|
|
59
53
|
}>(),
|
|
60
54
|
{
|
|
61
55
|
color: "blue",
|
|
@@ -138,13 +132,12 @@ const handlePaste = (e: any) => {
|
|
|
138
132
|
.tags-input {
|
|
139
133
|
cursor: text;
|
|
140
134
|
@apply flex flex-wrap gap-2 items-center shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
|
|
135
|
+
&.error {
|
|
136
|
+
@apply border-red-500 dark:border-red-400 border !important;
|
|
137
|
+
}
|
|
141
138
|
}
|
|
142
139
|
.tag-label {
|
|
143
140
|
@apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
|
|
144
|
-
|
|
145
|
-
&.error {
|
|
146
|
-
@apply text-red-700 dark:text-red-500;
|
|
147
|
-
}
|
|
148
141
|
}
|
|
149
142
|
.tag {
|
|
150
143
|
@apply inline-flex gap-1 font-medium px-2.5 py-0.5 rounded text-black dark:text-white;
|