@redseed/redseed-ui-vue3 2.11.6 → 2.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/FormField/FormFieldCheckbox.vue

@@ -26,12 +26,13 @@ function check(event) {
                 <CheckIcon v-if="checked"></CheckIcon>
                 <input
                     v-model="model"
+                    type="checkbox"
+                    :autofocus="$attrs.autofocus"
+                    :disabled="$attrs.disabled"
                     :id="$attrs.id"
                     :name="$attrs.name"
-                    :disabled="$attrs.disabled"
                     :required="$attrs.required"
                     @input="check"
-                    type="checkbox"
                 >
             </div>
             <div v-if="$slots.label"

package/src/components/FormField/FormFieldEmail.vue

@@ -1,8 +1,18 @@
 <script setup>
+import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-email"
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-email"
     type="email"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldHidden.vue

@@ -13,10 +13,11 @@ const model = defineModel()
 >
     <input
         v-model="model"
+        type="hidden"
+        :disabled="$attrs.disabled"
         :id="$attrs.id"
         :name="$attrs.name"
         :required="$attrs.required"
-        type="hidden"
     >
     <template #error v-if="$slots.error">
         <slot name="error"></slot>

package/src/components/FormField/FormFieldNumber.vue

@@ -1,8 +1,18 @@
 <script setup>
+import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-number"
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-number"
     type="number"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldPassword.vue

@@ -1,8 +1,18 @@
 <script setup>
+import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-password"
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-password"
     type="password"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -8,9 +8,18 @@ const show = ref(false)
 function togglePassword() {
     show.value = !show.value
 }
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-password"
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-password"
     :type="show ? 'text' : 'password'"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldSearch.vue

@@ -1,9 +1,20 @@
 <script setup>
+import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-search">
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-search"
+>
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>

package/src/components/FormField/FormFieldSelect.vue

@@ -38,6 +38,14 @@ function choose(option) {
     emit('change', option.value)
     close()
 }
+
+const selectElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (selectElement.value) selectElement.value.focus()
+    },
+})
 </script>
 <template>
 <FormFieldSlot
@@ -51,11 +59,13 @@ function choose(option) {
         <slot name="label"></slot>
     </template>
     <div class="rsui-form-field-select__group">
-        <select
+        <select ref="selectElement"
             v-model="model"
+            :autocomplete="$attrs.autocomplete"
+            :autofocus="$attrs.autofocus"
+            :disabled="$attrs.disabled"
             :id="$attrs.id"
             :name="$attrs.name"
-            :disabled="$attrs.disabled"
             :required="$attrs.required"
             @click.prevent="toggleOptions"
             @change.prevent

package/src/components/FormField/FormFieldText.vue

@@ -11,6 +11,12 @@ defineEmits(['input'])
 const model = defineModel()
 
 const inputElement = ref(null)
+
+defineExpose({
+    focus() {
+        inputElement.value.focus()
+    },
+})
 </script>
 <template>
 <FormFieldSlot
@@ -25,19 +31,27 @@ const inputElement = ref(null)
     <div class="rsui-form-field-text__group">
         <div v-if="$slots.prefix"
             class="rsui-form-field-text__prefix"
-            @click.prevent="$refs.inputElement.focus()"
+            @click.prevent="inputElement.focus()"
         >
             <slot name="prefix"></slot>
         </div>
 
         <input ref="inputElement"
             v-model="model"
+            :autocomplete="$attrs.autocomplete"
+            :autofocus="$attrs.autofocus"
+            :disabled="$attrs.disabled"
             :id="$attrs.id"
+            :max="$attrs.max"
+            :maxlength="$attrs.maxlength"
+            :min="$attrs.min"
+            :minlength="$attrs.minlength"
             :name="$attrs.name"
-            :type="$attrs.type || 'text'"
+            :pattern="$attrs.pattern"
             :placeholder="$attrs.placeholder"
-            :disabled="$attrs.disabled"
             :required="$attrs.required"
+            :step="$attrs.step"
+            :type="$attrs.type || 'text'"
             @input="$emit('input', $event)"
         >
 

package/src/components/FormField/FormFieldTextSuffix.vue

@@ -1,8 +1,19 @@
 <script setup>
+import { ref } from 'vue'
 import FormFieldText from './FormFieldText.vue'
+
+const formFieldTextElement = ref(null)
+
+defineExpose({
+    focus() {
+        if (formFieldTextElement.value) formFieldTextElement.value.focus()
+    },
+})
 </script>
 <template>
-<FormFieldText class="rsui-form-field-suffix">
+<FormFieldText ref="formFieldTextElement"
+    class="rsui-form-field-suffix"
+>
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>

package/src/components/FormField/FormFieldTextarea.vue

@@ -21,6 +21,12 @@ function onInput(event) {
 function onSelect(event) {
     emit('select', event)
 }
+
+defineExpose({
+    focus() {
+        if (textarea.value) textarea.value.focus()
+    },
+})
 </script>
 <template>
 <FormFieldSlot
@@ -34,10 +40,13 @@ function onSelect(event) {
     </template>
     <textarea ref="textarea"
         v-model="input"
+        :autofocus="$attrs.autofocus"
+        :disabled="$attrs.disabled"
         :id="$attrs.id"
+        :maxlength="$attrs.maxlength"
+        :minlength="$attrs.minlength"
         :name="$attrs.name"
         :placeholder="$attrs.placeholder"
-        :disabled="$attrs.disabled"
         :required="$attrs.required"
         :rows="$attrs.rows"
         @input="onInput"