@fy-/fws-vue 2.1.45 → 2.1.46

package/components/ui/DefaultInput.vue

@@ -3,11 +3,10 @@ import type { ErrorObject } from '@vuelidate/core'
 import { computed, ref, toRef } from 'vue'
 import { useTranslation } from '../../composables/translations'
 import DefaultTagInput from './DefaultTagInput.vue'
-// import VueTailwindDatepicker from "vue-tailwind-datepicker";
 
 type modelValueType = string | number | string[] | number[] | undefined
-
 type checkboxValueType = any[] | Set<any> | undefined | boolean
+
 const props = withDefaults(
   defineProps<{
     id: string
@@ -52,29 +51,19 @@ const props = withDefaults(
     dpOptions: () => ({}),
   },
 )
-/* function disableDatesAdult(date: Date) {
-  if (!props.disableDatesUnder18) return false
-  const today = new Date()
-  const date18YearsAgo = new Date(
-    today.getFullYear() - 18,
-    today.getMonth(),
-    today.getDate(),
-  )
-
-  return date >= date18YearsAgo
-} */
 
 const translate = useTranslation()
 const inputRef = ref<HTMLInputElement>()
+
 const errorProps = toRef(props, 'error')
 const errorVuelidateProps = toRef(props, 'errorVuelidate')
+
 const checkErrors = computed(() => {
   if (errorProps.value) return errorProps.value
   if (errorVuelidateProps.value && errorVuelidateProps.value.length > 0) {
-    const err = `vuelidate_validator_${errorVuelidateProps.value[0].$validator.toString()}`
-    return translate(err)
+    const errKey = `vuelidate_validator_${errorVuelidateProps.value[0].$validator.toString()}`
+    return translate(errKey)
   }
-
   return null
 })
 
@@ -85,39 +74,43 @@ function blur() {
   if (inputRef.value) inputRef.value.blur()
 }
 function getInputRef() {
-  if (inputRef.value) return inputRef.value
+  return inputRef.value
 }
+
 const emit = defineEmits([
   'update:modelValue',
   'update:checkboxValue',
   'focus',
   'blur',
 ])
+
 function handleFocus() {
   emit('focus', props.id)
 }
-
 function handleBlur() {
   emit('blur', props.id)
 }
 
-const model = computed({
+const model = computed<modelValueType>({
   get: () => props.modelValue,
-  set: (items) => {
-    emit('update:modelValue', items)
+  set: (value) => {
+    emit('update:modelValue', value)
   },
 })
-const modelCheckbox = computed({
+
+const modelCheckbox = computed<checkboxValueType>({
   get: () => props.checkboxValue,
-  set: (items) => {
-    emit('update:checkboxValue', items)
+  set: (value) => {
+    emit('update:checkboxValue', value)
   },
 })
+
 defineExpose({ focus, blur, getInputRef })
 </script>
 
 <template>
   <div>
+    <!-- TEXT, PASSWORD, EMAIL, SEARCH, DATE, DATETIME, URL, TEXTAREA, SELECT, PHONE, TEL, RANGE, CHIPS, TAGS, MASK, DATEPICKER -->
     <template
       v-if="
         [
@@ -142,6 +135,7 @@ defineExpose({ focus, blur, getInputRef })
       "
     >
       <div class="flex flex-col gap-2">
+        <!-- Basic input types -->
         <div
           v-if="
             [
@@ -162,12 +156,16 @@ defineExpose({ focus, blur, getInputRef })
           class="relative"
         >
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}
-            <template v-if="type === 'range'"> ({{ model }}) </template>
+          >
+            {{ label }}
+            <template v-if="type === 'range'">
+              ({{ model }})
+            </template>
           </label>
+
           <input
             :id="id"
             ref="inputRef"
@@ -176,29 +174,33 @@ defineExpose({ focus, blur, getInputRef })
             :name="id"
             :class="{
               'error': checkErrors,
-              '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':
-                type !== 'range',
-              'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700':
-                type === 'range',
+              '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': type !== 'range',
+              'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700': type === 'range',
             }"
             :autocomplete="autocomplete"
             :min="type === 'range' ? minRange : undefined"
             :max="type === 'range' ? maxRange : undefined"
             :placeholder="placeholder"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
             @focus="handleFocus"
             @blur="handleBlur"
           >
+
+          <!-- Range Input Extra Labels -->
           <template v-if="type === 'range'">
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6"
-            >Min ({{ minRange }})
+            >
+              Min ({{ minRange }})
             </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
-            >{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span>
+            >
+              {{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}
+            </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
             >
@@ -206,38 +208,20 @@ defineExpose({ focus, blur, getInputRef })
             </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6"
-            >Max ({{ maxRange }})</span>
+            >
+              Max ({{ maxRange }})
+            </span>
           </template>
         </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">
-            <VueTailwindDatepicker
-              v-model="model"
-              :disable-date="disableDatesAdult"
-              :formatter="{
-                date: 'YYYY-MM-DD',
-                month: 'MMM',
-              }"
-              :placeholder="placeholder"
-              as-single
-            ></VueTailwindDatepicker>
-          </div>
-        </div>
-        -->
 
+        <!-- CHIPS / TAGS -->
         <div v-if="type === 'chips' || type === 'tags'">
           <label
-            v-if="label || placeholder"
+            v-if="showLabel && (label || placeholder)"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label ? label : placeholder }}
+          >
+            {{ label ? label : placeholder }}
           </label>
           <!-- @vue-skip -->
           <DefaultTagInput
@@ -251,12 +235,16 @@ defineExpose({ focus, blur, getInputRef })
             :max-lenght-per-tag="maxLengthPerTag"
           />
         </div>
+
+        <!-- TEXTAREA (AUTO-GROW) -->
         <div v-else-if="type === 'textarea-grow'" class="group relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <div class="grow-wrap">
             <!-- @vue-skip -->
             <textarea
@@ -269,9 +257,13 @@ defineExpose({ focus, blur, getInputRef })
               }"
               :placeholder="placeholder"
               :disabled="disabled"
-              :aria-describedby="help ? `${id}-help` : id"
+              :aria-describedby="help ? `${id}-help` : undefined"
               :required="req"
-              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"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              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"
               @focus="handleFocus"
               @blur="handleBlur"
             />
@@ -284,16 +276,19 @@ defineExpose({ focus, blur, getInputRef })
                 model?.toString().length > dpOptions.counterMax,
             }"
           >
-            {{ model?.toString().length }} /
-            {{ dpOptions.counterMax }} characters
+            {{ model?.toString().length }} / {{ dpOptions.counterMax }} characters
           </div>
         </div>
+
+        <!-- TEXTAREA (REGULAR) -->
         <div v-else-if="type === 'textarea'" class="group relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <!-- @vue-skip -->
           <textarea
             :id="id"
@@ -305,9 +300,14 @@ defineExpose({ focus, blur, getInputRef })
             }"
             :placeholder="placeholder"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
-            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"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            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"
             @focus="handleFocus"
             @blur="handleBlur"
           />
@@ -319,34 +319,42 @@ defineExpose({ focus, blur, getInputRef })
                 model?.toString().length > dpOptions.counterMax,
             }"
           >
-            {{ model?.toString().length }} /
-            {{ dpOptions.counterMax }} characters
+            {{ model?.toString().length }} / {{ dpOptions.counterMax }} characters
           </div>
         </div>
+
+        <!-- SELECT -->
         <div v-else-if="type === 'select'" class="relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <select
             :id="id"
             ref="inputRef"
             v-model="model"
             :name="id"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
             :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"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            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"
             @focus="handleFocus"
             @blur="handleBlur"
           >
             <option
               v-for="opt in options"
-              :key="opt[0].toString()"
+              :key="opt[0]?.toString()"
               :value="opt[0]"
             >
               {{ opt[1] }}
@@ -355,6 +363,8 @@ defineExpose({ focus, blur, getInputRef })
         </div>
       </div>
     </template>
+
+    <!-- TOGGLE (switch) -->
     <template v-else-if="type === 'toggle'">
       <label
         class="inline-flex items-center mb-5 cursor-pointer"
@@ -369,39 +379,60 @@ defineExpose({ focus, blur, getInputRef })
           :false-value="checkboxFalseValue"
           :disabled="disabled"
           class="sr-only peer"
+          :aria-invalid="checkErrors ? 'true' : 'false'"
+          :aria-describedby="help ? `${id}-help` : undefined"
+          :aria-checked="modelCheckbox ? 'true' : 'false'"
+          role="switch"
           @focus="handleFocus"
           @blur="handleBlur"
         >
         <div
-          class="relative flex-0 flex-shrink-0 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"
+          class="relative flex-0 flex-shrink-0 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"
         />
         <span
           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">
+            <p
+              :id="help ? `${id}-help` : undefined"
+              class="text-fv-neutral-600 dark:text-fv-neutral-400 !text-sm"
+            >
               {{ help }}
             </p>
           </template>
         </span>
       </label>
     </template>
+
+    <!-- CHECKBOX / RADIO -->
     <template v-else-if="type === 'checkbox' || type === 'radio'">
       <div class="flex mb-4">
         <div class="flex items-center h-5">
           <input
             :id="id"
+            ref="inputRef"
             v-model="modelCheckbox"
             :class="{
               error: checkErrors,
             }"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :type="type"
             :true-value="checkboxTrueValue"
             :false-value="checkboxFalseValue"
             :disabled="disabled"
-            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"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            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"
             @focus="handleFocus"
             @blur="handleBlur"
           >
@@ -410,7 +441,9 @@ defineExpose({ focus, blur, getInputRef })
           <label
             :for="id"
             class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <p
             v-if="help"
             :id="`${id}-help`"
@@ -421,10 +454,18 @@ defineExpose({ focus, blur, getInputRef })
         </div>
       </div>
     </template>
-    <p v-if="checkErrors" class="mt-0.5 text-sm text-red-600 dark:text-red-300">
+
+    <!-- Error message -->
+    <p
+      v-if="checkErrors"
+      class="mt-0.5 text-sm text-red-600 dark:text-red-300"
+      role="alert"
+      aria-live="assertive"
+    >
       {{ checkErrors }}
     </p>
 
+    <!-- Help text (for other input types) -->
     <p
       v-if="help && !['checkbox', 'radio', 'toggle'].includes(type)"
       :id="`${id}-help`"
@@ -440,7 +481,7 @@ input,
 textarea,
 select {
   &.error {
-    @apply border-red-500  dark:border-red-400;
+    @apply border-red-500 dark:border-red-400;
   }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.1.45",
+  "version": "2.1.46",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",