@fy-/fws-vue 1.1.3 → 1.1.4

package/components/ui/DefaultInput.vue

@@ -4,7 +4,7 @@ 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 Datepicker from "flowbite-datepicker/Datepicker";
+import VueDatePicker from "@vuepic/vue-datepicker";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -49,7 +49,6 @@ const translate = useTranslation();
 const inputRef = ref<HTMLInputElement>();
 const errorProps = toRef(props, "error");
 const errorVuelidateProps = toRef(props, "errorVuelidate");
-const dpRef = ref<Datepicker | null>(null);
 const checkErrors = computed(() => {
   if (errorProps.value) return errorProps.value;
   if (errorVuelidateProps.value && errorVuelidateProps.value.length > 0) {
@@ -96,31 +95,6 @@ const modelCheckbox = computed({
   },
 });
 defineExpose({ focus, blur, getInputRef });
-
-function setDpValue(e: any) {
-  model.value = e.detail.date.toISOString().split("T")[0];
-  dpValue.value = e.detail.date.toISOString().split("T")[0];
-}
-
-const dpValue = ref<string | undefined>(undefined);
-
-onMounted(() => {
-  if (props.type === "datepicker" && inputRef.value) {
-    dpRef.value = new Datepicker(inputRef.value, {
-      autohide: true,
-      format: "yyyy-mm-dd",
-      dateFormat: "yyyy-mm-dd",
-      ...props.dpOptions,
-    });
-    inputRef.value.addEventListener("changeDate", setDpValue);
-  }
-});
-onUnmounted(() => {
-  if (dpRef.value) {
-    dpRef.value.destroy();
-    inputRef.value?.removeEventListener("changeDate", setDpValue);
-  }
-});
 </script>
 <template>
   <div>
@@ -209,17 +183,14 @@ onUnmounted(() => {
                 />
               </svg>
             </div>
-            <input
-              datepicker
-              type="text"
-              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 ps-10 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"
-              :placeholder="placeholder"
-              :disabled="disabled"
-              :aria-describedby="help ? `${id}-help` : id"
-              :required="req"
-              ref="inputRef"
+            <VueDatePicker
               v-model="model"
-            />
+              model-type="yyyy-mm-dd"
+              auto-apply
+              :placeholder="placeholder"
+              year-first
+              dark
+            ></VueDatePicker>
           </div>
         </div>
         <div v-if="type == 'chips' || type == 'tags'">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,6 @@
     "vue": "^3.3.x",
     "vue-picture-cropper": "^0.7.x",
     "vue-router": "^4.1.x",
-    "flowbite-datepicker": "^1.2.x"
+    "@vuepic/vue-datepicker": "^8.8.x"
   }
 }