@fy-/fws-vue 0.3.4 → 0.3.5

package/components/ui/DefaultInput.vue

@@ -145,6 +145,7 @@ defineExpose({ focus, blur, getInputRef });
             }"
             v-model="model"
             :autocomplete="autocomplete"
+            :placeholder="placeholder"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
             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"

package/components/ui/DefaultModal.vue

@@ -71,12 +71,11 @@ onUnmounted(() => {
             v-if="title"
           >
             <slot name="before"></slot>
-            <DialogTitle
+            <h2
               class="text-xl font-semibold text-fv-neutral-900 dark:text-white"
               v-if="title"
-            >
-              {{ title }}
-            </DialogTitle>
+              v-html="title"
+            />
             <button
               @click="setModal(false)"
               class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white"

package/components/ui/DefaultTagInput.vue

@@ -5,7 +5,7 @@
     @keydown.delete.prevent="removeLastTag"
     @keydown.enter.prevent="addTag"
   >
-    <span v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
+    <span v-for="(tag, index) in model" :key="index" :class="`tag ${color}`">
       {{ tag }}
       <button type="button" @click.prevent="removeTag(index)">
         <svg
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
 
 const props = withDefaults(
@@ -59,17 +59,15 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:modelValue"]);
-const tags = ref([...props.modelValue]);
 const textInput = ref<HTMLElement>();
 
-watch(
-  tags,
-  (newTags) => {
-    emit("update:modelValue", newTags);
+const emit = defineEmits(["update:modelValue"]);
+const model = computed({
+  get: () => props.modelValue,
+  set: (items) => {
+    emit("update:modelValue", items);
   },
-  { deep: true },
-);
+});
 
 onMounted(() => {
   if (props.autofocus) {
@@ -92,23 +90,32 @@ const addTag = () => {
     .split(separatorsRegex)
     .map((tag: string) => tag.trim())
     .filter((tag: string) => tag.length > 0);
-  tags.value.push(...newTags);
+  model.value.push(...newTags);
   textInput.value.innerText = "";
 };
 
 const removeTag = (index: number) => {
-  tags.value.splice(index, 1);
+  model.value.splice(index, 1);
   focusInput();
 };
 
 const removeLastTag = () => {
   if (!textInput.value) return;
-
   if (textInput.value.innerText === "") {
-    tags.value.pop();
+    model.value.pop();
+  } else {
+    const currentLength = textInput.value.innerText.length;
+    textInput.value.innerText = textInput.value.innerText.slice(0, -1);
+
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.selectNodeContents(textInput.value);
+    range.collapse(false);
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(range);
   }
 };
-
 const focusInput = () => {
   if (!textInput.value) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {