@fy-/fws-vue 1.6.0 → 1.6.2

package/components/ui/DefaultInput.vue

@@ -11,7 +11,7 @@ import {
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
 import DefaultTagInput from "./DefaultTagInput.vue";
-import VueDatePicker from "@vuepic/vue-datepicker";
+import VueTailwindDatepicker from "vue-tailwind-datepicker";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -191,14 +191,16 @@ defineExpose({ focus, blur, getInputRef });
                 />
               </svg>
             </div>
-            <VueDatePicker
+            <!-- @vue-skip -->
+            <VueTailwindDatepicker
               v-model="model"
-              auto-apply
+              :formatter="{
+                date: 'YYYY-MM-DD',
+                month: 'MMM',
+              }"
               :placeholder="placeholder"
-              year-first
-              dark
-              :enable-time-picker="false"
-            ></VueDatePicker>
+              as-single
+            ></VueTailwindDatepicker>
           </div>
         </div>
 

package/components/ui/DefaultTagInput.vue

@@ -1,3 +1,49 @@
+<template>
+  <div
+    :class="`tags-input ${$props.error ? 'error' : ''}`"
+    @click="focusInput"
+    @keydown.delete.prevent="removeLastTag"
+    @keydown.enter.prevent="addTag"
+  >
+    <span
+      v-for="(tag, index) in model"
+      :key="index"
+      class="tag"
+      :class="{
+        red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
+        [color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
+      }"
+    >
+      {{ tag }}
+      <button type="button" @click.prevent="removeTag(index)">
+        <svg
+          class="w-4 h-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            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"
+          />
+        </svg>
+      </button>
+    </span>
+    <div
+      contenteditable
+      class="input"
+      :id="`tags_${id}`"
+      ref="textInput"
+      @input="handleInput"
+      @paste.prevent="handlePaste"
+      placeholder="Add a tag..."
+    ></div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
 type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
@@ -68,23 +114,18 @@ const removeLastTag = () => {
   if (textInput.value.innerText === "") {
     model.value.pop();
   } else {
-    try {
-      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);
-    } catch (e) {
-      console.error(e);
-    }
+    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;
 
@@ -104,52 +145,6 @@ const handlePaste = (e: any) => {
 };
 </script>
 
-<template>
-  <ClientOnly
-    :class="`tags-input ${$props.error ? 'error' : ''}`"
-    @click="focusInput"
-    @keydown.enter.prevent="addTag"
-    @keydown.backspace.prevent="removeLastTag"
-  >
-    <span
-      v-for="(tag, index) in model"
-      :key="index"
-      class="tag"
-      :class="{
-        red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
-        [color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
-      }"
-    >
-      {{ tag }}
-      <button type="button" @click.prevent="removeTag(index)">
-        <svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            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"
-          />
-        </svg>
-      </button>
-    </span>
-    <div
-      contenteditable
-      class="input"
-      :id="`tags_${id}`"
-      ref="textInput"
-      @input="handleInput"
-      @paste.prevent="handlePaste"
-      placeholder="Add a tag..."
-    ></div>
-  </ClientOnly>
-</template>
-
 <style scoped>
 .tags-input {
   cursor: text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -39,6 +39,7 @@
     "timeago.js": "^4.0.x",
     "vue": "^3.3.x",
     "vue-picture-cropper": "^0.7.x",
-    "vue-router": "^4.1.x"
+    "vue-router": "^4.1.x",
+    "vue-tailwind-datepicker": "^1.7.x"
   }
 }