@fy-/fws-vue 1.3.6 → 1.3.7

package/components/fws/UserProfile.vue

@@ -229,7 +229,7 @@ function selectFile(e: Event) {
       id="birthdateFWS"
       v-model="state.userData.Birthdate"
       class="mb-4"
-      type="date"
+      type="datepicker"
       :dp-options="{
         format: 'yyyy-mm-dd',
       }"

package/components/fws/UserProfileStrict.vue

@@ -138,7 +138,7 @@ const patchUser = async () => {
       :dp-options="{
         format: 'yyyy-mm-dd',
       }"
-      type="date"
+      type="datepicker"
       :label="$t('fws_birthdate_label')"
       :error-vuelidate="v$.userData.Birthdate.$errors"
     />

package/components/ui/DefaultInput.vue

@@ -11,6 +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";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -167,6 +168,39 @@ defineExpose({ focus, blur, getInputRef });
             @blur="handleBlur"
           />
         </div>
+        <div v-if="type == 'datepicker'">
+          <label
+            :for="id"
+            v-if="label || placeholder"
+            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
+            >{{ label ? label : placeholder }}
+          </label>
+          <div class="relative max-w-xl">
+            <div
+              class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
+            >
+              <svg
+                class="w-4 h-4 text-fv-neutral-500 dark:text-fv-neutral-400"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+                />
+              </svg>
+            </div>
+            <VueDatePicker
+              v-model="model"
+              auto-apply
+              :placeholder="placeholder"
+              year-first
+              dark
+              :enable-time-picker="false"
+            ></VueDatePicker>
+          </div>
+        </div>
 
         <div v-if="type == 'chips' || type == 'tags'">
           <label

package/package.json

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