@fy-/fws-vue 0.2.8 → 0.3.0

package/components/ui/DefaultInput.vue

@@ -3,15 +3,6 @@ import { LinkIcon } from "@heroicons/vue/24/solid";
 import { computed, ref, toRef } from "vue";
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
-import InputText from "primevue/inputtext";
-import Textarea from "primevue/textarea";
-import Calendar from "primevue/calendar";
-import Password from "primevue/password";
-import Checkbox from "primevue/checkbox";
-import Dropdown from "primevue/dropdown";
-import Chips from "primevue/chips";
-import InputSwitch from "primevue/inputswitch";
-import InputMask from "primevue/inputmask";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -62,20 +53,29 @@ const checkErrors = computed(() => {
   return null;
 });
 
-const formattedOptions = computed(() => {
-  return props.options.map((option) => {
-    return { value: option[0], label: option[1] };
-  });
-});
-
 const focus = () => {
   if (inputRef.value) inputRef.value.focus();
 };
+const blur = () => {
+  if (inputRef.value) inputRef.value.blur();
+};
 const getInputRef = () => {
   if (inputRef.value) return inputRef.value;
 };
 
-const emit = defineEmits(["update:modelValue", "update:checkboxValue"]);
+const handleFocus = () => {
+  emit("focus", props.id);
+};
+
+const handleBlur = () => {
+  emit("blur", props.id);
+};
+const emit = defineEmits([
+  "update:modelValue",
+  "update:checkboxValue",
+  "focus",
+  "blur",
+]);
 const model = computed({
   get: () => props.modelValue,
   set: (items) => {
@@ -88,7 +88,7 @@ const modelCheckbox = computed({
     emit("update:checkboxValue", items);
   },
 });
-defineExpose({ focus, getInputRef });
+defineExpose({ focus, blur, getInputRef });
 </script>
 <template>
   <div>
@@ -112,148 +112,162 @@ defineExpose({ focus, getInputRef });
       "
     >
       <div class="flex flex-col gap-2">
-        <label :for="id" v-if="label">{{ label }}</label>
-        <!-- @vue-skip -->
-        <InputText
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          :pt:root:autocomplete="autocomplete"
-          :pt:root:type="type"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
+        <div
           v-if="
-            (type == 'text' && !mask) ||
-            type == 'email' ||
-            type == 'search' ||
-            type == 'url' ||
-            type == 'phone'
-          "
-        />
-        <!-- @vue-skip -->
-        <InputMask
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          :pt:root:autocomplete="autocomplete"
-          :pt:root:type="type"
-          :mask="mask"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          v-if="type == 'mask' || (type == 'text' && mask)"
-        />
-        <!-- @vue-skip -->
-        <Textarea
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          v-if="type == 'textarea'"
-        />
-        <!-- @vue-skip -->
-        <Calendar
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          showIcon
-          iconDisplay="input"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
+            [
+              'text',
+              'phone',
+              'password',
+              'email',
+              'search',
+              'url',
+              'mask',
+            ].includes(type)
           "
-          v-if="type == 'date'"
-        />
-        <!-- @vue-skip -->
-        <Calendar
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          showTime
-          hourFormat="24"
-          showIcon
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          v-if="type == 'datetime'"
-        />
-        <!-- @vue-skip -->
-        <Password
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          :invalid="checkErrors ? true : false"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          toggleMask
-          v-if="type == 'password'"
-        />
-        <!-- @vue-skip -->
-        <Dropdown
-          :id="id"
-          v-model="model"
-          :options="formattedOptions"
-          :placeholder="placeholder"
-          optionLabel="label"
-          optionValue="value"
-          :invalid="checkErrors ? true : false"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          v-if="type == 'select'"
-        />
-        <!-- @vue-skip -->
-        <Chips
-          :id="id"
-          v-model="model"
-          :placeholder="placeholder"
-          separator=","
-          :invalid="checkErrors ? true : false"
-          :aria-describedby="
-            help && !['checkbox', 'radio'].includes(type)
-              ? `${id}-help`
-              : undefined
-          "
-          v-if="type == 'chips'"
-        />
-        <small
-          :id="`${id}-help`"
-          v-if="help && !['checkbox', 'radio'].includes(type)"
+          class="relative"
         >
-          {{ help }}
-        </small>
+          <input
+            ref="inputRef"
+            :type="type"
+            :id="id"
+            :name="id"
+            :class="{
+              error: checkErrors,
+            }"
+            :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"
+            :required="req"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          />
+          <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"
+            >{{ label ? label : placeholder }}
+          </label>
+        </div>
+        <div class="group relative" v-else-if="type == 'textarea'">
+          <label
+            :for="id"
+            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
+            >Your message</label
+          >
+          <textarea
+            :id="id"
+            :name="id"
+            ref="inputRef"
+            :class="{
+              error: checkErrors,
+            }"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :aria-describedby="help ? `${id}-help` : id"
+            :required="req"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            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"
+            v-if="label"
+            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
+            >{{ label }}</label
+          >
+          <select
+            :id="id"
+            :name="id"
+            ref="inputRef"
+            :disabled="disabled"
+            :aria-describedby="help ? `${id}-help` : id"
+            :required="req"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            :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 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"
+          >
+            <option
+              v-for="opt in options"
+              :value="opt[0]"
+              :key="opt[0].toString()"
+            >
+              {{ opt[1] }}
+            </option>
+          </select>
+        </div>
       </div>
     </template>
     <template v-else-if="type === 'toggle'">
-      <label class="inline-flex items-start cursor-pointer">
-        <!-- @vue-skip -->
-        <InputSwitch v-model="modelCheckbox" class="flex-0 flex-shrink-0" />
-
+      <label
+        class="inline-flex items-center mb-5 cursor-pointer"
+        :class="{
+          error: checkErrors,
+        }"
+      >
+        <input
+          type="checkbox"
+          v-model="modelCheckbox"
+          class="sr-only peer"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+        <div
+          class="relative w-11 h-6 bg-fv-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-fv-primary-300 dark:peer-focus:ring-fv-primary-800 rounded-full peer dark:bg-fv-neutral-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-fv-neutral-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-fv-neutral-600 peer-checked:bg-fv-primary-600"
+        ></div>
         <span
-          class="ms-3 font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
-          >{{ label }}
+          class="ms-3 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
+        >
+          {{ label }}
           <template v-if="help">
             <p class="text-fv-neutral-600 dark:text-fv-neutral-400 !text-sm">
               {{ help }}
@@ -262,80 +276,57 @@ defineExpose({ focus, getInputRef });
         </span>
       </label>
     </template>
-    <template v-else-if="type == 'checkbox'">
-      <div class="flex items-center">
-        <Checkbox
-          v-model="modelCheckbox"
-          :binary="true"
-          :aria-describedby="label"
-        />
-
-        <label
-          :for="id"
-          v-if="label"
-          :class="{
-            error: checkErrors,
-          }"
-          >{{ label }}
-          <a class="fws-link" :href="linkIcon" target="_blank" v-if="linkIcon">
-            <LinkIcon class="w-4 h-4" />
-          </a>
-        </label>
+    <template v-else-if="type == 'checkbox' || type == 'radio'">
+      <div class="flex mb-4">
+        <div class="flex items-center h-5">
+          <input
+            :id="id"
+            :class="{
+              error: checkErrors,
+            }"
+            :aria-describedby="help ? `${id}-help` : id"
+            :type="type"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            v-model="modelCheckbox"
+            class="w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600"
+          />
+        </div>
+        <div class="ms-2 text-sm">
+          <label
+            :for="id"
+            class="font-medium text-gray-900 dark:text-gray-300"
+            >{{ label }}</label
+          >
+          <p
+            :id="`${id}-help`"
+            v-if="help"
+            class="text-xs font-normal text-gray-500 dark:text-gray-400"
+          >
+            {{ help }}
+          </p>
+        </div>
       </div>
     </template>
-    <p v-if="checkErrors" class="mt-0.5 text-xs fws-error-text">
+    <p v-if="checkErrors" class="mt-0.5 text-sm text-red-600 dark:text-red-300">
       {{ checkErrors }}
     </p>
 
     <p
-      class="fws-input-helper"
-      v-if="help && !['checkbox', 'radio'].includes(type)"
+      :id="`${id}-help`"
+      class="mt-1 text-sm text-fv-neutral-500 dark:text-fv-neutral-400"
+      v-if="help && !['checkbox', 'radio', 'toggle'].includes(type)"
     >
       {{ help }}
     </p>
   </div>
 </template>
 <style scoped>
-.fws-label {
-  @apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
-
-  &.error {
-    @apply text-red-700 dark:text-red-500;
-  }
-}
-.fws-input-helper {
-  @apply mt-2 text-sm text-fv-neutral-500 dark:text-fv-neutral-400;
-}
-.fws-input {
-  @apply shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full 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;
-  &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
-  }
-}
-.fws-textarea {
-  @apply block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-sm 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;
-  &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
-  }
-}
-
-.fws-select {
-  @apply bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full 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;
+input,
+textarea,
+select {
   &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+    @apply border-red-500  dark:border-red-400;
   }
 }
-.fws-checkbox {
-  @apply flex items-center mb-4;
-}
-
-.fws-checkbox input {
-  @apply w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600;
-  &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
-  }
-}
-.fws-checkbox label {
-  @apply ml-2 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -24,6 +24,16 @@
     "./style.css": {
       "import": "./style.css",
       "require": "./style.css"
+    },
+    "./presets/Lara": {
+      "import": "./presets/Lara/index.js",
+      "require": "./presets/Lara/index.js",
+      "types": "./presets/Lara/index.js"
+    },
+    "./presets/Wind": {
+      "import": "./presets/Wind/index.js",
+      "require": "./presets/Wind/index.js",
+      "types": "./presets/Wind/index.js"
     }
   },
   "peerDependencies": {
@@ -38,6 +48,6 @@
     "timeago.js": "^4.0.x",
     "vue": "^3.3.x",
     "vue-router": "^4.1.x",
-    "primevue": "^3.5.x"
+    "flowbite": "^2.3.x"
   }
 }