@fy-/fws-vue 1.2.8 → 1.3.0

package/components/ui/DefaultInput.vue

@@ -3,7 +3,7 @@ import { LinkIcon } from "@heroicons/vue/24/solid";
 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 DefaultTagInput from "./DefaultTagInput.vue";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -96,11 +96,16 @@ const modelCheckbox = computed({
 });
 defineExpose({ focus, blur, getInputRef });
 const dpComponent = ref<any | null>(null);
+const dptagComponent = ref<any | null>(null);
 onMounted(async () => {
   if (props.type === "datepicker") {
     const { default: VueDatePicker } = await import("@vuepic/vue-datepicker");
     dpComponent.value = VueDatePicker;
   }
+  if (props.type === "tags" || props.type === "chips") {
+    const { default: DefaultTagInput } = await import("./DefaultTagInput.vue");
+    dptagComponent.value = DefaultTagInput;
+  }
 });
 </script>
 <template>
@@ -210,7 +215,9 @@ onMounted(async () => {
             >{{ label ? label : placeholder }}
           </label>
           <!-- @vue-skip -->
-          <DefaultTagInput
+          <component
+            :is="dptagComponent"
+            v-if="dptagComponent"
             v-model="model"
             :id="id"
             :disabled="disabled"

package/components/ui/DefaultTagInput.vue

@@ -64,11 +64,11 @@ const removeTag = (index: number) => {
 };
 
 const removeLastTag = () => {
-  if (!textInput.value) return;
-  if (textInput.value.innerText === "") {
-    model.value.pop();
-  } else {
-    try {
+  if (!import.meta.env.SSR) {
+    if (!textInput.value) return;
+    if (textInput.value.innerText === "") {
+      model.value.pop();
+    } else {
       const currentLength = textInput.value.innerText.length;
       textInput.value.innerText = textInput.value.innerText.slice(0, -1);
 
@@ -79,8 +79,6 @@ const removeLastTag = () => {
       if (!sel) return;
       sel.removeAllRanges();
       sel.addRange(range);
-    } catch (e) {
-      console.error(e);
     }
   }
 };
@@ -91,15 +89,17 @@ const focusInput = () => {
 };
 
 const handlePaste = (e: any) => {
-  if (!textInput.value) return;
-
-  // @ts-ignore
-  const text = (e.clipboardData || window.clipboardData).getData("text");
-  const separatorsRegex = new RegExp(props.separators.join("|"), "g");
-  const pasteText = text.replace(separatorsRegex, ",");
-  textInput.value.innerText += pasteText;
-  e.preventDefault();
-  addTag();
+  if (!import.meta.env.SSR) {
+    if (!textInput.value) return;
+
+    // @ts-ignore
+    const text = (e.clipboardData || window.clipboardData).getData("text");
+    const separatorsRegex = new RegExp(props.separators.join("|"), "g");
+    const pasteText = text.replace(separatorsRegex, ",");
+    textInput.value.innerText += pasteText;
+    e.preventDefault();
+    addTag();
+  }
 };
 </script>
 

package/package.json

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