@fy-/fws-vue 0.3.21 → 0.3.23
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.
|
@@ -3,7 +3,7 @@ import { LinkIcon } from "@heroicons/vue/24/solid";
|
|
|
3
3
|
import { computed, 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
7
|
type modelValueType = string | number | string[] | number[] | undefined;
|
|
8
8
|
|
|
9
9
|
type checkboxValueType = any[] | Set<any> | undefined | boolean;
|
|
@@ -25,6 +25,7 @@ const props = withDefaults(
|
|
|
25
25
|
options?: string[][];
|
|
26
26
|
help?: string;
|
|
27
27
|
error?: string;
|
|
28
|
+
color?: string;
|
|
28
29
|
errorVuelidate?: ErrorObject[];
|
|
29
30
|
disabled?: boolean;
|
|
30
31
|
}>(),
|
|
@@ -128,6 +129,12 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
128
129
|
"
|
|
129
130
|
class="relative"
|
|
130
131
|
>
|
|
132
|
+
<label
|
|
133
|
+
:for="id"
|
|
134
|
+
v-if="label || placeholder"
|
|
135
|
+
class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
|
|
136
|
+
>{{ label ? label : placeholder }}
|
|
137
|
+
</label>
|
|
131
138
|
<input
|
|
132
139
|
ref="inputRef"
|
|
133
140
|
:type="type"
|
|
@@ -136,27 +143,33 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
136
143
|
:class="{
|
|
137
144
|
error: checkErrors,
|
|
138
145
|
}"
|
|
146
|
+
v-model="model"
|
|
139
147
|
:autocomplete="autocomplete"
|
|
140
148
|
:disabled="disabled"
|
|
141
149
|
:aria-describedby="help ? `${id}-help` : id"
|
|
142
|
-
class="
|
|
150
|
+
class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block 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"
|
|
143
151
|
:required="req"
|
|
144
152
|
@focus="handleFocus"
|
|
145
153
|
@blur="handleBlur"
|
|
146
154
|
/>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
155
|
+
</div>
|
|
156
|
+
<div v-if="type == 'chips'">
|
|
157
|
+
<!-- @vue-skip -->
|
|
158
|
+
<DefaultTagInput
|
|
159
|
+
v-model="model"
|
|
160
|
+
:id="id"
|
|
161
|
+
:disabled="disabled"
|
|
162
|
+
:color="color"
|
|
163
|
+
/>
|
|
153
164
|
</div>
|
|
154
165
|
<div class="group relative" v-else-if="type == 'textarea'">
|
|
155
166
|
<label
|
|
167
|
+
v-if="label"
|
|
156
168
|
:for="id"
|
|
157
169
|
class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
|
|
158
|
-
>
|
|
170
|
+
>{{ label }}</label
|
|
159
171
|
>
|
|
172
|
+
<!-- @vue-skip -->
|
|
160
173
|
<textarea
|
|
161
174
|
:id="id"
|
|
162
175
|
:name="id"
|
|
@@ -164,6 +177,7 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
164
177
|
:class="{
|
|
165
178
|
error: checkErrors,
|
|
166
179
|
}"
|
|
180
|
+
v-model="model"
|
|
167
181
|
:placeholder="placeholder"
|
|
168
182
|
:disabled="disabled"
|
|
169
183
|
:aria-describedby="help ? `${id}-help` : id"
|
|
@@ -184,6 +198,7 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
184
198
|
:id="id"
|
|
185
199
|
:name="id"
|
|
186
200
|
ref="inputRef"
|
|
201
|
+
v-model="model"
|
|
187
202
|
:disabled="disabled"
|
|
188
203
|
:aria-describedby="help ? `${id}-help` : id"
|
|
189
204
|
:required="req"
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<label
|
|
4
|
+
:for="`tags_${id}`"
|
|
5
|
+
v-if="label"
|
|
6
|
+
class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
|
|
7
|
+
>{{ label }}</label
|
|
8
|
+
>
|
|
9
|
+
<div class="tags-input" @click="focusInput" @keydown.delete="removeLastTag">
|
|
10
|
+
<span v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
|
|
11
|
+
{{ tag }}
|
|
12
|
+
<button @click.stop="removeTag(index)">
|
|
13
|
+
<svg
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
fill="none"
|
|
16
|
+
viewBox="0 0 24 24"
|
|
17
|
+
stroke-width="1.5"
|
|
18
|
+
stroke="currentColor"
|
|
19
|
+
class="w-3 h-3 text-red-600"
|
|
20
|
+
>
|
|
21
|
+
<path
|
|
22
|
+
stroke-linecap="round"
|
|
23
|
+
stroke-linejoin="round"
|
|
24
|
+
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
</button>
|
|
28
|
+
</span>
|
|
29
|
+
<div
|
|
30
|
+
contenteditable
|
|
31
|
+
class="input"
|
|
32
|
+
:id="`tags_${id}`"
|
|
33
|
+
ref="textInput"
|
|
34
|
+
@input="handleInput"
|
|
35
|
+
@paste.prevent="handlePaste"
|
|
36
|
+
placeholder="Add a tag..."
|
|
37
|
+
></div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script setup lang="ts">
|
|
43
|
+
import { ref, watch, onMounted } from "vue";
|
|
44
|
+
type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
|
|
45
|
+
|
|
46
|
+
const props = withDefaults(
|
|
47
|
+
defineProps<{
|
|
48
|
+
modelValue: string[];
|
|
49
|
+
color?: colorType;
|
|
50
|
+
label?: string;
|
|
51
|
+
id: string;
|
|
52
|
+
separators?: string[];
|
|
53
|
+
autofocus?: boolean;
|
|
54
|
+
}>(),
|
|
55
|
+
{
|
|
56
|
+
color: "blue",
|
|
57
|
+
label: "Tags",
|
|
58
|
+
separators: () => [","],
|
|
59
|
+
autofocus: false,
|
|
60
|
+
},
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
const emit = defineEmits(["update:modelValue"]);
|
|
64
|
+
const tags = ref([...props.modelValue]);
|
|
65
|
+
const textInput = ref<HTMLElement>();
|
|
66
|
+
|
|
67
|
+
watch(
|
|
68
|
+
tags,
|
|
69
|
+
(newTags) => {
|
|
70
|
+
emit("update:modelValue", newTags);
|
|
71
|
+
},
|
|
72
|
+
{ deep: true },
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
onMounted(() => {
|
|
76
|
+
if (props.autofocus) {
|
|
77
|
+
focusInput();
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const handleInput = (event: any) => {
|
|
82
|
+
const separatorsRegex = new RegExp(props.separators.join("|"));
|
|
83
|
+
if (separatorsRegex.test(event.data)) {
|
|
84
|
+
addTag();
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
const addTag = () => {
|
|
89
|
+
if (!textInput.value) return;
|
|
90
|
+
|
|
91
|
+
const separatorsRegex = new RegExp(props.separators.join("|"));
|
|
92
|
+
const newTags = textInput.value.innerText
|
|
93
|
+
.split(separatorsRegex)
|
|
94
|
+
.map((tag: string) => tag.trim())
|
|
95
|
+
.filter((tag: string) => tag.length > 0);
|
|
96
|
+
tags.value.push(...newTags);
|
|
97
|
+
textInput.value.innerText = "";
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
const removeTag = (index: number) => {
|
|
101
|
+
tags.value.splice(index, 1);
|
|
102
|
+
focusInput();
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
const removeLastTag = () => {
|
|
106
|
+
if (!textInput.value) return;
|
|
107
|
+
|
|
108
|
+
if (textInput.value.innerText === "") {
|
|
109
|
+
tags.value.pop();
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const focusInput = () => {
|
|
114
|
+
if (!textInput.value) return;
|
|
115
|
+
|
|
116
|
+
textInput.value.focus();
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
const handlePaste = (e: any) => {
|
|
120
|
+
if (!textInput.value) return;
|
|
121
|
+
|
|
122
|
+
// @ts-ignore
|
|
123
|
+
const text = (e.clipboardData || window.clipboardData).getData("text");
|
|
124
|
+
const separatorsRegex = new RegExp(props.separators.join("|"), "g");
|
|
125
|
+
const pasteText = text.replace(separatorsRegex, ",");
|
|
126
|
+
textInput.value.innerText += pasteText;
|
|
127
|
+
e.preventDefault();
|
|
128
|
+
addTag();
|
|
129
|
+
};
|
|
130
|
+
</script>
|
|
131
|
+
|
|
132
|
+
<style scoped>
|
|
133
|
+
.tags-input {
|
|
134
|
+
cursor: text;
|
|
135
|
+
@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;
|
|
136
|
+
}
|
|
137
|
+
.tag-label {
|
|
138
|
+
@apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
|
|
139
|
+
|
|
140
|
+
&.error {
|
|
141
|
+
@apply text-red-700 dark:text-red-500;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
.tag {
|
|
145
|
+
@apply inline-flex gap-1 font-medium px-2.5 py-0.5 rounded text-black dark:text-white;
|
|
146
|
+
&.blue {
|
|
147
|
+
@apply bg-blue-400 dark:bg-blue-900;
|
|
148
|
+
}
|
|
149
|
+
&.red {
|
|
150
|
+
@apply bg-red-400 dark:bg-red-900;
|
|
151
|
+
}
|
|
152
|
+
&.green {
|
|
153
|
+
@apply bg-green-400 dark:bg-green-900;
|
|
154
|
+
}
|
|
155
|
+
&.purple {
|
|
156
|
+
@apply bg-purple-400 dark:bg-purple-900;
|
|
157
|
+
}
|
|
158
|
+
&.orange {
|
|
159
|
+
@apply bg-orange-400 dark:bg-orange-900;
|
|
160
|
+
}
|
|
161
|
+
&.neutral {
|
|
162
|
+
@apply bg-fv-neutral-400 dark:bg-fv-neutral-900;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.input {
|
|
167
|
+
flex-grow: 1;
|
|
168
|
+
min-width: 100px;
|
|
169
|
+
outline: none;
|
|
170
|
+
border: none;
|
|
171
|
+
}
|
|
172
|
+
</style>
|