@fy-/fws-vue 0.3.1 → 0.3.21

package/components/ui/DefaultInput.vue

@@ -122,6 +122,8 @@ defineExpose({ focus, blur, getInputRef });
               'search',
               'url',
               'mask',
+              'date',
+              'datetime',
             ].includes(type)
           "
           class="relative"
@@ -137,7 +139,7 @@ defineExpose({ focus, blur, getInputRef });
             :autocomplete="autocomplete"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
-            class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-fv-neutral-900 bg-transparent rounded-lg border-1 border-fv-neutral-300 appearance-none dark:text-white dark:border-fv-neutral-600 dark:focus:border-fv-primary-500 focus:outline-none focus:ring-0 focus:border-fv-primary-600 peer"
+            class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 dark:bg-fv-neutral-700 border-0 border-b-2 border-fv-neutral-300 appearance-none dark:text-white dark:border-fv-neutral-600 dark:focus:border-fv-primary-500 focus:outline-none focus:ring-0 focus:border-fv-primary-600 peer"
             :required="req"
             @focus="handleFocus"
             @blur="handleBlur"
@@ -145,7 +147,7 @@ defineExpose({ focus, blur, getInputRef });
           <label
             :for="id"
             v-if="label || placeholder"
-            class="absolute text-sm text-fv-neutral-500 dark:text-fv-neutral-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-fv-neutral-900 px-2 peer-focus:px-2 peer-focus:text-fv-primary-600 peer-focus:dark:text-fv-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1"
+            class="absolute text-sm text-fv-neutral-500 dark:text-fv-neutral-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-fv-primary-600 peer-focus:dark:text-fv-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
             >{{ label ? label : placeholder }}
           </label>
         </div>
@@ -171,50 +173,6 @@ defineExpose({ focus, blur, getInputRef });
             class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 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"
           ></textarea>
         </div>
-        <div
-          class="relative max-w-sm"
-          v-else-if="type == 'datetime' || type == 'date'"
-        >
-          <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>
-          <label
-            :for="id"
-            v-if="label"
-            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-            >{{ label }}</label
-          >
-
-          <input
-            datepicker
-            ref="inputRef"
-            type="text"
-            :class="{
-              error: checkErrors,
-            }"
-            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"
-            :id="id"
-            :name="id"
-            :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
-            :required="req"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            :placeholder="placeholder"
-          />
-        </div>
         <div class="relative" v-else-if="type == 'select'">
           <label
             :for="id"
@@ -295,13 +253,13 @@ defineExpose({ focus, blur, getInputRef });
         <div class="ms-2 text-sm">
           <label
             :for="id"
-            class="font-medium text-gray-900 dark:text-gray-300"
+            class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
             >{{ label }}</label
           >
           <p
             :id="`${id}-help`"
             v-if="help"
-            class="text-xs font-normal text-gray-500 dark:text-gray-400"
+            class="text-xs font-normal text-fv-neutral-500 dark:text-fv-neutral-400"
           >
             {{ help }}
           </p>

package/package.json

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