@fy-/fws-vue 1.2.6 → 1.2.8

package/components/ui/DefaultInput.vue

@@ -4,7 +4,6 @@ import { computed, onMounted, onUnmounted, ref, toRef } from "vue";
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
 import DefaultTagInput from "./DefaultTagInput.vue";
-import VueDatePicker from "@vuepic/vue-datepicker";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -96,6 +95,13 @@ const modelCheckbox = computed({
   },
 });
 defineExpose({ focus, blur, getInputRef });
+const dpComponent = ref<any | null>(null);
+onMounted(async () => {
+  if (props.type === "datepicker") {
+    const { default: VueDatePicker } = await import("@vuepic/vue-datepicker");
+    dpComponent.value = VueDatePicker;
+  }
+});
 </script>
 <template>
   <div>
@@ -184,14 +190,16 @@ defineExpose({ focus, blur, getInputRef });
                 />
               </svg>
             </div>
-            <VueDatePicker
+            <component
+              :is="dpComponent"
+              v-if="dpComponent"
               v-model="model"
               auto-apply
               :placeholder="placeholder"
               year-first
               dark
               :enable-time-picker="false"
-            ></VueDatePicker>
+            ></component>
           </div>
         </div>
         <div v-if="type == 'chips' || type == 'tags'">

package/components/ui/DefaultTagInput.vue

@@ -1,49 +1,3 @@
-<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";
@@ -114,16 +68,20 @@ const removeLastTag = () => {
   if (textInput.value.innerText === "") {
     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);
+    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 focusInput = () => {
@@ -145,6 +103,52 @@ const handlePaste = (e: any) => {
 };
 </script>
 
+<template>
+  <ClientOnly
+    :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>
+  </ClientOnly>
+</template>
+
 <style scoped>
 .tags-input {
   cursor: text;

package/package.json

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